如何實現vue中不跳轉不閃動頁面刷新？provide /inject 完美解決方案

在vue的項目中刷新功能你會怎麼寫？
我以前一直用this.$router.go(0)這個方法用戶體驗很很差，由於頁面會閃動一下刷新
直到我發現了這個方法 provide /inject
不過這個方法貌似有兼容問題，首先要肯定一下你的vue版本，此方法適用vue 2.20+
原理：此方法使用的是v-if來控制router-view的顯示或隱藏，v-if從false變爲true時，vue會從新渲染router-view區域，因此當參數變化時，只需讓v-if 從true => false => true,就能實現頁面刷新
首先，找到本身的route-view

//App.vue

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

   <script>
    export default {
      name: 'App',
      provide() {
        return {
          reload: this.reload//調用reload方法
        }
      },
      data() {
        return {
          isRouterAlive: true//一開始router-view爲true
        }
      },
    
      methods: {
        reload() {
          this.isRouterAlive = false
             //在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM
          this.$nextTick(() => {
            this.isRouterAlive = true
          })
        }
      }
    }
   </script>

而後在<route-view>下顯示的vue頁面中進行以下操做

export default {
      name: 'newproduct',
      inject:['reload'],//在export default下面加上這一段
      method:{
        //調用App.vue下的this.reload()方法，來改變v-if的狀態
        clickDiv(){//刷新按鈕調用的方法
          this.reload()
        }
      }

就ok了

加油！天天進步一點點！