怎么在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 組件，而不能出現其他標簽，不然會導致無法緩存頁面。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。