本文例項講述了vue路由快取的幾種實現方式。分享給大家供大家參考，具體如下：

在我們的日常開發中，有時候會遇到頁面的快取，特別是電商的專案，在商品列表的一些狀態都是要快取下來的。

下面就簡單介紹幾種 vue 路由快取的幾種方式。

1、全部快取

<keep-alive>
  <router-view></router-view>
</keep-alive>

直接用 keep-alive 標籤包裹 router-view 標籤就能快取全部的頁面了

2、快取單個指定路由

<keep-alive include="該路由的name名稱">
  <router-view></router-view>
</keep-alive>

同樣直接用 keep-alive 標籤包裹 router-view 標籤，然後使用 include 指定需要快取的頁面的 name 名稱

可以使用 v-bind 繫結一個 name 陣列，也可用 '，'隔開，也可使用正則表示式，多個的情況建議使用第三種

注意：是快取頁面的 name 名稱，而不是快取頁面路由的 name 名稱

3、快取多個指定路由

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

使用兩個 router-view 標籤分別作為快取和不快取的路由出口，在路由配置的時候，只需要給要快取的頁面加上 meta屬性，然後新增 keepAlive 屬性設定為 true 即可。例如：

{
 path:'/test',name:'Test',component: Test,meta: {keepAlive: true} //true快取 false不快取
}

四、activated和deactivated

activated，deactivated 這兩個生命週期函式一定是要在使用了 keep-alive 元件後才會有的，否則則不存在。

當引入 keep-alive 的時候，頁面第一次進入

鉤子的觸發順序 created-> mounted -> activated，退出時觸發deactivated。

當再次進入（前進或者後退）時，只觸發 activated

注意：keep-alive裡面緊跟包裹 router-view 元件，而不能出現其他標籤，不然會導致無法快取頁面。

如果需要在路由不變的情況下，無白屏重新整理頁面，請參照前文：vue.js路由不變，無白屏重新整理頁面

希望本文所述對大家vue.js程式設計有所幫助。