有時候在頁面裡做了某些操作以後，需要頁面重新整理一下來重新獲取資料。試了幾種方法，以下總結：

1、this.$router.go(0)

這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行程式碼的事

2、location.reload()

這種也是一樣，畫面一閃，效果總不是很好

3、跳轉空白頁再跳回原頁面

在需要頁面重新整理的地方寫上：this.$router.push('/emptyPage')，跳轉到一個空白頁。在emptyPage.vue裡beforeRouteEnter 鉤子裡控制頁面跳轉，從而達到重新整理的效果

beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.$router.replace(from.path)
      })
}。

這種畫面雖不會一閃，但是能看見路由快速變化。

4、控制<router-view>的顯示隱藏

預設<router-view v-if="isRouterAlive" />isRouterAlive肯定是true，在需要重新整理的時候把這個值設為false，接著再重新設為true：

this.isRouterAlive = false
this.$nextTick(function () {
  this.isRouterAlive = true
})
這種方法從畫面上是看不出破綻的。也可以搭配provide、inject使用。例如：

然後在需要重新整理的頁面引入依賴：inject: ['reload'],

在需要執行的地方直接呼叫方法即可：this.reload()。

我的業務需求是在home裡，頁面右上角，在我的裡面點選修改個人資料成功後，頁面1就要重新整理一下，如果是在app裡面搭配provide、inject這樣用的話，會出現一個問題，就是所有的彈窗以及menu部分就都不見了。還沒有找到為什麼，，

後來發現，我的需求不通過重新整理頁面也可以解決，就是利用VUE元件通訊，監聽事件發生，然後重新調一下獲取資料的介面就行。

也就是說：

1、給Vue的原型上新增一個bus屬性

main.js：Vue.prototype.$bus = new Vue()

2、home頁面進行修改個人資料操作時觸發事件，

home.vue： changeProfile （） {this.$bus.$emit('change')}

3、頁面1裡監聽如果執行了操作，就調取頁面1需要重新載入的資料介面。

mounted () {
  this.$bus.$on('change', ()=> {
    this.doSomething()
  })
},
對於我的需求來說，頁面重新整理的第四種方法和利用元件通訊都能解決我的問題，前者更簡單後者更專業，也更強大。

小夥伴們可以參考VUE官方文件：$dispatch 和 $broadcast 替換
--------------------- 
作者：liya要成大前端 
來源：CSDN 
原文：https://blog.csdn.net/baidu_39418435/article/details/81538760 
版權宣告：本文為博主原創文章，轉載請附上博文連結！