我們在寫項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到，用戶執(zhí)行完某個(gè)動(dòng)作，改變了某些狀態(tài)，需要重新刷新頁面，以此來重新渲染頁面。如：用戶登錄成功、增加、刪除、更新等。
原始方法：
location.reload();
vue自帶的路由跳轉(zhuǎn)：
this.$router.go(0);
用過的人都知道，前兩者都是強(qiáng)制刷新頁面，會(huì)出現(xiàn)短暫的閃爍，用戶體驗(yàn)效果不好。
所以，我們選擇第三種方式：
- 首先在App里面寫下如下代碼：
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () { //父組件中通過provide來提供變量，在子組件中通過inject來注入變量。
return {
reload: this.reload
}
},
data() {
return{
isRouterAlive: true //控制視圖是否顯示的變量
}
},
methods: {
reload () {
this.isRouterAlive = false; //先關(guān)閉，
this.$nextTick(function () {
this.isRouterAlive = true; //再打開
})
}
}，
}
</script>
接下來，我們就可以在需要刷新頁面的組件里這樣寫：
export default {
inject:['reload'], //注入App里的reload方法
data () {
return {
.......
}
},
在需要刷新頁面的代碼塊中使用：
this.reload();
原文鏈接：https://blog.csdn.net/weixin_43885417/article/details/91310674
