脚本宝典收集整理的这篇文章主要介绍了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多级路由缓存问题的文章就介绍到这了,更多相关vue keep-alive多级路由缓存内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue中keep-alive多级路由缓存问题全部内容，希望文章能够帮你解决vue中keep-alive多级路由缓存问题所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。