vue中keep-alive多級(jí)路由緩存問(wèn)題
1.問(wèn)題描述
對(duì)賬中心當(dāng)便捷導(dǎo)航菜單最后兩個(gè)是同一模塊且是三級(jí)及以上菜單時(shí),正常切換兩個(gè)便捷頁(yè)簽時(shí)是可以正常緩存的,但刪除最后一個(gè)頁(yè)簽時(shí),此時(shí)另一個(gè)頁(yè)簽頁(yè)面此時(shí)已經(jīng)不緩存了。
2.原因分析
keep-alive默認(rèn)支持緩存是兩級(jí),對(duì)三級(jí)及以上層級(jí)的頁(yè)面緩存失效,之前的處理方式為: 監(jiān)聽(tīng)到路由變化后,將當(dāng)前的路由的標(biāo)識(shí)及父級(jí)標(biāo)識(shí)一起存起來(lái),當(dāng)多個(gè)頁(yè)面存在時(shí),關(guān)閉其中一個(gè)頁(yè)面,也會(huì)將本身及父級(jí)的標(biāo)識(shí)一起刪掉,此時(shí)數(shù)組中已無(wú)父級(jí)標(biāo)識(shí),其他同級(jí)頁(yè)面的緩存將失效。
3.解決思路
將路由配置表的所有路由拆成兩個(gè)操作,一是保持原樣用于菜單的展示,二是對(duì)路由配置表進(jìn)行扁平化處理,將所有的路由處理成二級(jí)路由,這樣keep-alive就能默認(rèn)支持緩存了。
4.處理過(guò)程
拿到完整的路由配置
const modules = []
files.keys().forEach(key => {
const filesObj = files(key).default || files(key)
Object.keys(filesObj).forEach(keyOne => {
modules.push(filesObj[keyOne])
})
})
操作完成路由配置
export const menuList = modules; // 用于菜單展示
?
const routerList = formatTwoStageRoutes(formatFlatteningRoutes(modules)); // 將路由扁平化為二級(jí)路由
?
const router = new VueRouter({
scrollBehavior: () => ({ y: 0 }),
mode: 'history',
base: process.env.BASE_URL,
routes: routerList, // 在路由配置項(xiàng)中使用扁平化處理后的路由
})
扁平化方法
export const formatFlatteningRoutes =(routesList => {
if (routesList.length <= 0) return routesList;
let list = [];
routesList.forEach(v => {
if(v.path === '/') {
// 用于添加初試layout和首頁(yè),其他各中心配置過(guò)濾掉layout及父節(jié)點(diǎn),只保留children內(nèi)路由
list.push(v);
list = list.concat(formatFlatteningRoutes(v.children))
} else if (v.children && v.children.length > 0) {
list = list.concat(formatFlatteningRoutes(v.children))
} else {
list.push(v);
}
})
return list;
})
?
export const formatTwoStageRoutes = list => {
if (list.length <= 0) return list;
const routerList = [];
list.forEach(v => {
if (v.path === '/') {
routerList.push({
component: v.component,
name: v.name,
path: v.path,
redirect: v.redirect,
meta: v.meta,
children: []
})
} else if (v.path === '/login' || v.path === '/showcasePage') {
// 不需要配置layout的頁(yè)面
routerList.push(v)
} else {
routerList[0].children.push({ ...v })
}
})
return routerList;
}
到此這篇關(guān)于vue中keep-alive多級(jí)路由緩存問(wèn)題的文章就介紹到這了,更多相關(guān)vue keep-alive多級(jí)路由緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 使某個(gè)組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個(gè)組件不被 keep-alive 緩存的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開(kāi)始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vant?Weapp組件picker選擇器初始默認(rèn)選中問(wèn)題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
vue安裝遇到的5個(gè)報(bào)錯(cuò)及解決方法
在本篇文章里小編給大家分享了關(guān)于vue安裝遇到的5個(gè)報(bào)錯(cuò)小結(jié)以及解決方法,需要的朋友們參考下。2019-06-06
VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

