1). location方式 2). router方式 3). provide/inject方式 App.vue export default { name: 'App', // 提供reload方法 provide: function () { return { reload: this.relo ...
1). location方式
location.reload()
缺點:刷新頁面,卡白
2). router方式
this.$router.go(0)
缺點:同一問題,比一好點
3). provide/inject方式
App.vue
<router-view v-if="isRouterAlive"></router-view>
<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>
缺點:暫時比較不錯的解決方案,重點控制`router-view`