vue刷新當前頁面

https://www.jianshu.com/p/5f9db6b8914b

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

解決方案以及出現的問題

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

2.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() {
  }
};