vue中keep-alive多級路由緩存問題
1.問題描述
對賬中心當便捷導航菜單最后兩個是同一模塊且是三級及以上菜單時,正常切換兩個便捷頁簽時是可以正常緩存的,但刪除最后一個頁簽時,此時另一個頁簽頁面此時已經(jīng)不緩存了。
2.原因分析
keep-alive默認支持緩存是兩級,對三級及以上層級的頁面緩存失效,之前的處理方式為: 監(jiān)聽到路由變化后,將當前的路由的標識及父級標識一起存起來,當多個頁面存在時,關閉其中一個頁面,也會將本身及父級的標識一起刪掉,此時數(shù)組中已無父級標識,其他同級頁面的緩存將失效。
3.解決思路
將路由配置表的所有路由拆成兩個操作,一是保持原樣用于菜單的展示,二是對路由配置表進行扁平化處理,將所有的路由處理成二級路由,這樣keep-alive就能默認支持緩存了。
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)); // 將路由扁平化為二級路由
?
const router = new VueRouter({
scrollBehavior: () => ({ y: 0 }),
mode: 'history',
base: process.env.BASE_URL,
routes: routerList, // 在路由配置項中使用扁平化處理后的路由
})
扁平化方法
export const formatFlatteningRoutes =(routesList => {
if (routesList.length <= 0) return routesList;
let list = [];
routesList.forEach(v => {
if(v.path === '/') {
// 用于添加初試layout和首頁,其他各中心配置過濾掉layout及父節(jié)點,只保留children內路由
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的頁面
routerList.push(v)
} else {
routerList[0].children.push({ ...v })
}
})
return routerList;
}
到此這篇關于vue中keep-alive多級路由緩存問題的文章就介紹到這了,更多相關vue keep-alive多級路由緩存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue中mintui的field實現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實現(xiàn)blur和focus事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08

