本篇内容介绍了“vue中keep-alive多级路由缓存问题怎么处理”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时，正常切换两个便捷页签时是可以正常缓存的，但删除最后一个页签时，此时另一个页签页面此时已经不缓存了。
keep-alive默认支持缓存是两级，对三级及以上层级的页面缓存失效，之前的处理方式为： 监听到路由变化后，将当前的路由的标识及父级标识一起存起来，当多个页面存在时，关闭其中一个页面，也会将本身及父级的标识一起删掉，此时数组中已无父级标识，其他同级页面的缓存将失效。
将路由配置表的所有路由拆成两个操作，一是保持原样用于菜单的展示，二是对路由配置表进行扁平化处理，将所有的路由处理成二级路由，这样keep-alive就能默认支持缓存了。
拿到完整的路由配置
计算
安全
数据库
网络和加速
企业服务
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及父节点，只保留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多级路由缓存问题怎么处理”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
