一、通过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>
如果对您有用的话，别忘了给个三连，多谢多谢
