1、画面闪现,体验不好
location.reload();
2、瞬间白屏,体验不好
this.$router.go(0);
3、推荐provide&inject
在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>
在需要被刷新的页面添加组件inject: [‘reload’]
<script>
export default {
inject: ['reload'],
data() {
return {}
}
}
</script>
在需要刷新的地方添加this.reload()
this.reload()