Vue中刷新页面的三种方式
一、通过js原始方法刷新<template><div><div class="header"><button @click="update()">刷新页面</button></div></div></template><script>export default {data(){return
·
一、通过js原始方法刷新
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
update(){
location.reload()
}
}
}
</script>
二、通过Vue自带的路由进行跳转
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
update(){
this.$router.go(0)
}
}
}
</script>
三、通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式
(1)、在APP页面中写入下面代码
<template>
<div id="app">
<router-view v-if="isShow"/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isShow:true
}
},
methods:{
reload(){
this.isShow=false;
this.$nextTick(()=>{
this.isShow=true
})
}
}
}
</script>
(2)、在需要刷新的页面进行引入并使用
<template>
<div>
<div class="header">
<button @click="update()">刷新页面</button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
inject:[
'reload'
],
methods:{
update(){
this.reload()
console.log('刷新页面')
}
}
}
</script>
如果对您有用的话,别忘了给个三连,多谢多谢
更多推荐
已为社区贡献2条内容
所有评论(0)