在Vue項目中，刷新當(dāng)前頁除了 window.reload()，你還能想到什么辦法？而且這種辦法會重新加載資源出現(xiàn)短暫的空白頁面。體驗不是很好。

在某個詳情頁面的時候，我們經(jīng)常需要通過路由中的詳情 id 去獲取內(nèi)容，當(dāng)我們在不同的詳情頁來回切換的時候，打開的頁面是同一個，只是需要通過監(jiān)聽路由中的參數(shù) id 的變化去重新請求詳情接口。

如果這個詳情頁只需要一個接口還好，只需要通過 watch 去監(jiān)聽，里面做數(shù)據(jù)請求就好。

watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        if (to.name === 'Detail') {
          let id = to.params.id
           // ...
        }
      }
    }
  }

那一旦這個頁面有很多的接口，數(shù)據(jù)邏輯依賴很復(fù)雜的時候，這個時候再寫一推的監(jiān)聽就很容易出現(xiàn)屎山代碼。而且不好維護(hù)。

此時我們最希望的是進(jìn)入每個詳情頁都刷新頁面，也就是重新加載一遍組件。怎么去維護(hù)好一個全局刷新頁面的方法去更新路由組件？

我們可以通過在 App.vue 里定義一個 reload 方法，通過provide 和 inject 來拋出和注入到其它頁面使用。

而最終的重?fù)?dān)落在這個 reload 方法身上，其實也簡單，這個方法主要的做的事是控制一個變量的值來控制整個頁面的路由組件移除和顯示。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}

然后在其它頁面注入該方法直接調(diào)用即可

export default {
  inject: ['reload'],
  data() {
    return {
    }
  },

  methods: {
    refresh() {
      this.reload()
    }
  }

實際項目中經(jīng)常有各種曲線救國的思路可以幫我們解決很多問題。遇到問題一定要發(fā)散下思維，這個時候搞懂原理，再結(jié)合各種特性才能想到解決辦法。

實踐告訴我們文檔中的方法很正，但是并不能解決所有的問題。往往需要根據(jù)文檔中的多個特性相結(jié)合找到思路。