vue專案重新整理當前頁面的三種方法

想必大家在刨坑vue的時候也遇到過下面情形：比如在刪除或者增加一條記錄的時候希望當前頁面可以重新重新整理或者如下面這種：

如果希望點選確定的時候，Dialog 對話方塊關閉的時候，當前頁面可以重新重新整理下

那麼表格的資料可以重新載入，Dialog 對話方塊設定的資料可以在確定後重新整理出現在頁面上

這時候我們最直接的思維就是想到下面這種：

但是，試過的會發現用vue-router重新路由到當前頁面，頁面是不進行重新整理的，根本沒有任何作用~所以這個方法out！

下面我這邊整理幾種可圈可點的三種方式，大家可以自行的選擇：

location. reload()
this.$router.go(0)

這兩種都可以重新整理當前頁面的，缺點就是相當於按ctrl+F5 強制重新整理那種，整個頁面重新載入，會出現一個瞬間的空白頁面，體驗不好。

新建一個空白頁面supplierAllBack.vue，點選確定的時候先跳轉到這個空白頁，然後再立馬跳轉回來。

空白頁supplierAllBack.vue裡面的內容：

這個方式，相比第一種不會出現一瞬間的空白頁，只是位址列有個快速的切換的過程，可採用

這是我試過最實用的，下面用專案截圖給大家說明下：首先，要修改下你的app.vue

透過宣告reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次載入，這邊定義了

isRouterAlive //true or false 來控制

然後在需要當前頁面重新整理的頁面中注入App.vue元件提供（provide）的 reload 依賴，然後直接用this.reload來呼叫就行