提出問題

最近在做專案發現一個問題，當我使用了 keep-alive 標籤後，進入了某個路由進行一系列操作，再點選瀏覽器後退，再次進入剛才的路由，頁面被操作的資料沒有初始化！

分析問題

這是因為 keep-alive 將路由頁面快取，所以該路由沒有完成整個生命週期，沒有 destroyed，因此重新進入也沒有觸發其他生命週期鉤子，如 created 等。

解決問題

（1）. 檢視官方文件

當元件在 keep-alive 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。

include - 字串或正則表示式。只有匹配的元件會被快取。
exclude - 字串或正則表示式。任何匹配的元件都不會被快取。

<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正則表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- 陣列 (使用 `v-bind`) -->
<keep-alive
 
 :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先檢查元件自身的 name 選項，如果 name 選項不可用，則匹配它的區域性註冊名稱 (父元件 components 選項的鍵值)。匿名元件不能被匹配。

（2）. 監聽路由變化

使用 watch 監聽路由變化，但是我發現監聽路由只有在元件被 keep-alive 包裹時才生效，未包裹時不生效，原因不明，理解的小夥伴請留言告訴我！

watch: {
  '$route' (to, from) {
     // 對路由變化作出響應...
 

   }
}

beforeRouteUpdate 這個鉤子目前我發現還不能用，不知道哪裡出錯。

 beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }