利用vue做的後臺管理系統是單頁面系統，當你想實現刷新的功能通常有以下幾個方法： (1)window.location.reload() 這個是原生js中提供的一種刷新方法，用於刷新當前文檔。 (2)this.$router.go(0) vue-route提供的一種方法，在history記錄中前進或 ...
利用vue做的後臺管理系統是單頁面系統，當你想實現刷新的功能通常有以下幾個方法：
(1)window.location.reload()
這個是原生js中提供的一種刷新方法，用於刷新當前文檔。
(2)this.$router.go(0)
vue-route提供的一種方法，在history記錄中前進或者後退val步，當val為0時刷新當前頁面。
以上兩種方法，用的人都知道，這兩種方法都類似於瀏覽器上的刷新頁面按鈕。回導致頁面出現短暫的閃爍（重新載入頁面），雖然簡單粗暴，但是用戶體驗極差。
其實，局部的刷新就是小組件之間的刷新。最多的刷新場景就是對table列表中某條數據打開dialog框進行增刪改之後刷新table的操作。這種可以每個頁面都單獨寫好一個查詢表格的公共的方法，在mounted周期的時候可以調用用於頁面打開的時候預設展示table數據，需要的時候也可以調用用於刷新table數據。或是考慮以下兩種方法，但是以下兩種方法其實也是依靠mounted這個鉤子函數來進行刷新的，只是少聲明瞭一個公共方法而已。
(3)先跳轉到一個空白組件，在跳轉回原組件，觸發鉤子函數重新渲染達到刷新的目的。
首先，先定義一個空白組件：
<template>
<div></div>
</template>
<script>
export default{
data() {
return{
}
},
beforeRouteEnter (to, from, next) {
next(vm=>{
vm.$router.replace({
path:from.fullPath
})
})
},
}
</script>
該空白組件需要在route.js中定義path以及component路徑；其中next(vm=>{})這個裡面的代碼塊里的代碼很晚執行，在組件mounted周期之後才會被執行，執行的結果為跳回原組件。然後在需要刷新的地方調用this.$router.replace({path:'/XXXX'})，其中XXXX為之前route.js中定義的空白組件的path。導航欄里的url地址切換很快，基本看不到空白組件與原組件之間路徑名切換。
(4)利用組件的provide/inject選項(推薦)。
這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代註入一個依賴，不論組件層次有多深，併在起上下游關係成立的時間里始終生效。
先在App.vue中聲明一個reload方法
<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>
然後在需要刷新的頁面中這樣註入。
<script> export default { inject:['reload'], //註入App.vue組件提供（provide）的 reload 依賴 data () { return { //....... } }, mounted:function(){ //預設請求數據 }, } </script>
最後，在需要刷新的地方直接調用this.reload()即可。這樣App.vue中的<router-view></router-view>會因為v-if快速的由顯->隱->顯(true->false->true)。但因為v-if是通過控制dom節點的存在與否來控制元素的顯隱，切換有一個局部編譯/卸載的過程，所以切換過程中會銷毀和重建內部的事件監聽和子組件，以此達到刷新組件的目的。
