vue中keep-alive多級(jí)路由緩存問題
1.問題描述
對(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)聽到路由變化后,將當(dāng)前的路由的標(biāo)識(shí)及父級(jí)標(biāo)識(shí)一起存起來,當(dāng)多個(gè)頁(yè)面存在時(shí),關(guān)閉其中一個(gè)頁(yè)面,也會(huì)將本身及父級(jí)的標(biāo)識(shí)一起刪掉,此時(shí)數(shù)組中已無父級(jí)標(biāo)識(shí),其他同級(jí)頁(yè)面的緩存將失效。
3.解決思路
將路由配置表的所有路由拆成兩個(gè)操作,一是保持原樣用于菜單的展示,二是對(duì)路由配置表進(jìn)行扁平化處理,將所有的路由處理成二級(jí)路由,這樣keep-alive就能默認(rèn)支持緩存了。
4.處理過程
拿到完整的路由配置
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è),其他各中心配置過濾掉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í)路由緩存問題的文章就介紹到這了,更多相關(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ì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實(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)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue安裝遇到的5個(gè)報(bào)錯(cuò)及解決方法
在本篇文章里小編給大家分享了關(guān)于vue安裝遇到的5個(gè)報(bào)錯(cuò)小結(jié)以及解決方法,需要的朋友們參考下。2019-06-06VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的,文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08