vue 三種刷新當前頁面的方式---解決字典更新情況下，返回頁面未刷新的問題

有時候在項目中我們需要在頁面完成一些操作後,進行頁面刷新，但是使用js的刷新方式交互體驗很不友好，文中重點介紹provide / inject組合來解決司機開發中需要刷新的問題。
 

方案一（不推薦） this.$router.go(0). 通過路由跳轉的方式重新渲染頁面, 雖然代碼量很少,便於書寫和理解,但是體驗很差,在刷新的一瞬間會出現白屏的現象。

方案二（不推薦） location.reload(). 該方法只有一個參數，當值爲 true 時，將強制瀏覽器從服務器加載頁面資源，當值爲 false 或者未傳參時，瀏覽器則可能從緩存中讀取頁面。 缺點:該方法在跨域調用（執行該方法的腳本文件的域和 Location 對象所在頁面的跨不同）時，將會拋出 DOMException 異常。並且也同樣會出現頁面在刷新的時候會出現白屏的現象。

方案三 （provide / inject組合）

原理: 以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。
提示: provide 和 inject 綁定並不是可響應的。這是刻意爲之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的。

 

在APP.vue中,聲明reload方法,控制router-view模塊的顯示或者隱藏,從而控制頁面的再次加載。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </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>

在需要刷新的頁面,直接注入inject的reload依賴,在邏輯操作完成後需要刷新的位置,使用this.reload()調用,即可刷新當前頁面。

export default {
  inject: ["reload"], //注入reload方法
  data() {
    return {
    };
  },
  methods: {
    handleClick() {
      //此處操作頁面功能
      //.......

      this.reload(); //此處刷新頁面
    }
  },
};