1). location方式
location.reload()
2). router方式
this.$router.go(0)
3). provide/inject方式
- App.vue
<script>
export default {
name: 'App',
// 提供reload方法
provide: function () {
return {
reload: this.reload
}
},
// isRouterAlive控制显示
data: function () {
return {
isRouterAlive: true
}
},
methods: {
// 刷新方法
reload: function () {
this.isRouterAlive = false;
// 该方法会在dom更新后执行
this.$nextTick(function () { this.isRouterAlive = true })
}
}
}
</script>
- home.vue
<script>
export default {
name: 'home',
// 注入reload, AppVue中注册
inject: ['reload'],
methods: {
// 退出登陆
logout: function () {
// 刷新
// location.reload()
// this.$router.go(0)
// 刷新当前页面
this.reload();
}
}
}
</script>
效果演示:
![3110861-1285a5f372536252.gif](https://i-blog.csdnimg.cn/blog_migrate/e618ee0ba4d0b9070a90873603c3bafc.webp?x-image-process=image/format,png)
效果.gif