vue 中刷新當前頁面方式

有時候在項目中我們需要在頁面完成一些操作後,進行頁面刷新.文中重點介紹provide / inject組合是vue2.2.0新增的api

1. this.$router.go(0)

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

2. location.reload()

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

3. provide / inject組合

• 原理: 以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。
• 提示: provide 和 inject 綁定並不是可響應的。這是刻意爲之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的。
• 在APP.vue中,聲明reload方法,控制router-view模塊的顯示或者隱藏,從而控制頁面的再次加載.

  <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>
  

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

  export default {
    name: "ItemPage",
    components: {},
    inject: ["reload"], //注入reload方法
    data() {
      return {
      };
    },
    methods: {
      //頁面邏輯操作方法
      handleClick() {
        //此處操作頁面功能
        //.......
  
        this.reload(); //此處刷新頁面
      }
    },
    mounted() {
    }
  };