遇到問題的場景：
需要把當前元件完全還原成初始化狀態，不要頁面全部重新整理
例如：重置按鈕，只重新整理當前載入元件
其他辦法：
使用vue-router重新定向到當前頁面，頁面不重新整理
使用window-reload（） 頁面全部重新整理，使用者體驗太差

解決方法：
使用v-if provide inject和this.$nextTick()【版本限制 vue2.2.0】

原理：
使用v-if控制router-view的顯示或隱藏（v-if會把事件監聽器和自元件適當的銷燬或者重建）
使用provide / inject組合解決自元件層級比較深的問題
使用this.$nextTick()實現頁面非同步重新整理

provide / inject
就是父元件中使用provide提供變數(物件或者是一個函式),在子元件中通過inject來注入變數
不管層級有多深，並在起上下游關係成立的時間始終生效

this.$nextTick()
當dom發生變化，更新後執行的回撥

實際程式碼：
在App.vue裡面，宣告reload方法，然後通過provide把reload方法注入，使用bol值控制router-view隱藏（銷燬），再通過this.$nextTick()在dom更新之後利用bol控制router-view重新載入，實現頁面重新整理的效果

<template>
  <div id="app">
    <router-view v-if="isRouterShow"/>
  </div>
</template>
<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterShow: true
    }
  },
  methods: {
    async reload () {
      this.isRouterShow = false
      await this.$nextTick()
      this.isRouterShow = true
    }
  }
}
</script>
 

在子元件裡面
使用inject注入App.vue提供的reload依賴，然後在需要的地方直接呼叫this.reload()方法即可

export default {
   inject: ['reload'],
   watch: {
       '$route.query.index'(){
           this.reload()
       }
   }
 }

當路由從

door?index=0&dateName=normal

變到如下情況時，就會過載當前頁面

door?index=1&dateName=normal

這樣在路由變化的時候，就會更新當前頁面了

Vue提倡資料驅動dom，但是存在特殊情況，如果有更好的解決方法，請多多指教！