Vue項目刷新頁面的幾種方法總結

利用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節點的存在與否來控制元素的顯隱，切換有一個局部編譯/卸載的過程，所以切換過程中會銷燬和重建內部的事件監聽和子組件，以此達到刷新組件的目的。