vue項目刷新當前頁

當在vue項目中須要刷新當前頁時，第一個是否是想到this.$router.push(當前頁面的路徑)？
可是你會發現，這樣並無什麼用。由於基於vue這個框架，它發現當前路由沒有改變，它並不會刷新。

解決方法1

this.$router.go(0)

或者

window.location.href()

這兩種方式本質上就是從新刷新了整個頁面並且隨着項目業務的複雜程度，極可能會增長一些別的初始化請求，因此這並非最優解。

解決方法2
思路是新增一個空白頁，當須要執行刷新先跳轉到空白頁，再快速跳轉回來。
實現起來很簡單，我就不貼上代碼了。

解決方法3
這個方法最方便快捷，連空白頁的組件也不須要寫。
這裏用到了vue框架的provide和inject
在父組件中注入以來provide一個對象，在子組件中inject。
一、在APP.vue 頁面加一個條件渲染，默認爲true

<template>
  <div id="app">
    <router-view v-if="noRefresh" />
  </div>
</template>
<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      noRefresh: true
    }
  },
  methods:{
    // 須要reload時先將頁面隱藏，在dom更新後的回調再將頁面顯示
    reload() {
      this.noRefresh = false
      this.$nextTick(function(){
        this.noRefresh = true
      })
    }
  }
}
</script>

子組件

<script>
export default {
    inject:['reload'],
    methods:{
        func(){
            //刷新時執行的函數
            this.reload()
        }
    }
}
</script>