vue路由緩存的幾種實現(xiàn)方式小結(jié)
本文實例講述了vue路由緩存的幾種實現(xiàn)方式。分享給大家供大家參考，具體如下：
在我們的日常開發(fā)中，有時候會遇到頁面的緩存，特別是電商的項目，在商品列表的一些狀態(tài)都是要緩存下來的。
下面就簡單介紹幾種 vue 路由緩存的幾種方式。
1、全部緩存
<keep-alive> <router-view></router-view> </keep-alive>
直接用 keep-alive 標(biāo)簽包裹 router-view 標(biāo)簽就能緩存全部的頁面了
2、緩存單個指定路由
<keep-alive include="該路由的name名稱"> <router-view></router-view> </keep-alive>
同樣直接用 keep-alive 標(biāo)簽包裹 router-view 標(biāo)簽，然后使用 include 指定需要緩存的頁面的 name 名稱
可以使用 v-bind 綁定一個 name 數(shù)組，也可用 '，' 隔開，也可使用正則表達式，多個的情況建議使用第三種
注意：是緩存頁面的 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 標(biāo)簽分別作為緩存和不緩存的路由出口，在路由配置的時候，只需要給要緩存的頁面加上 meta 屬性，然后添加 keepAlive 屬性設(shè)置為 true 即可。例如：
{
path:'/test',
name:'Test',
component: Test,
meta: {keepAlive: true} //true緩存 false不緩存
}
四、activated和deactivated
activated，deactivated 這兩個生命周期函數(shù)一定是要在使用了 keep-alive 組件后才會有的，否則則不存在。
當(dāng)引入 keep-alive 的時候，頁面第一次進入
鉤子的觸發(fā)順序 created-> mounted -> activated，退出時觸發(fā)deactivated。
當(dāng)再次進入（前進或者后退）時，只觸發(fā) activated
注意：keep-alive里面緊跟包裹 router-view 組件，而不能出現(xiàn)其他標(biāo)簽，不然會導(dǎo)致無法緩存頁面。
如果需要在路由不變的情況下，無白屏刷新頁面，請參照前文：vue.js路由不變，無白屏刷新頁面
希望本文所述對大家vue.js程序設(shè)計有所幫助。
- Vue動態(tài)路由緩存不相互影響的解決辦法
- vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
- vue spa應(yīng)用中的路由緩存問題與解決方案
- 關(guān)于vue路由緩存清除在main.js中的設(shè)置
- 修改vue源碼實現(xiàn)動態(tài)路由緩存的方法
- vue實現(xiàn)路由不變的情況下，刷新頁面操作示例
- vue.js使用watch監(jiān)聽路由變化的方法
- 詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
- Vue+axios 實現(xiàn)http攔截及路由攔截實例
- vue通過路由實現(xiàn)頁面刷新的方法
- Vue實現(xiàn)路由跳轉(zhuǎn)和嵌套
- 詳解vue嵌套路由-params傳遞參數(shù)
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)旋轉(zhuǎn)木馬動畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-02-02
vuedraggable 是一個基于 Vue 的拖拽排序組件,它可以讓你輕松地在 Vue 應(yīng)用中實現(xiàn)拖拽排序功能,下面就跟隨小編一起來了解下它的具體應(yīng)用吧2024-12-12
這篇文章主要給大家介紹了關(guān)于vue3動態(tài)監(jiān)聽瀏覽器窗口變化的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務(wù)于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式
這篇文章主要介紹了vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了記錄--使用el-time-picker默認值遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07