我們在寫項目的時候，經常會遇到，用戶執行完某個動作，改變了某些狀態，需要重新刷新頁面，以此來重新渲染頁面。如：用戶登錄成功、增加、刪除、更新等。
- 原始方法： location.reload();
- vue自帶的路由跳轉： this.$router.go(0);
3.用過的人都知道，前兩者都是強制刷新頁面，會出現短暫的閃爍，用戶體驗效果不好。
所以，我們選擇第三種方式：
重點：
首先在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; //先關閉，
this.$nextTick(function () {
this.isRouterAlive = true; //再打開
})
}
}，
}
</script>
接下來，我們就可以在需要刷新頁面的組件里這樣寫：
export default {
inject:['reload'], //注入App里的reload方法
data () {
return {
.......
}
},
在需要刷新頁面的代碼塊中使用：
this.reload();