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