- 可以采用window.reload(),或者this.$router.go(0)等方法,缺点是会出现短暂的空白页面,体验不好
- 在父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量,具体实现如下
2.1、在App.vue中声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
2.2、在需要重载的页面加上
export default {
inject:['reload'],
data () {
return {
...
}
},
2.3、在需要运行重载方法的地方加上
this.reload();