vue多级路由keep alive问题,vue使用keep-alive缓存组件
主要介绍vue中的保活多级路由缓存问题，通过示例代码介绍的非常详细，有一定的参考价值，感兴趣的朋友可以参考一下。
:
目录
1.问题的描述
2.原因分析
3.解决方法
4.处理过程
1.问题描述
在对账中心，当最后两个便捷导航菜单是同一个模块且三级以上时，两个便捷页签正常切换时可以正常缓存，但删除最后一个页签时，此时另一个页签页面不缓存。
2.原因分析
Keep-alive默认支持两级缓存，三级及以上页面缓存无效。之前的处理方法是：监测到路由发生变化后，将当前路由标识和父标识一起存储。当存在多个页面时，关闭其中一个页面也会删除自己的和父标识，这样数组中就没有父标识了，同级别的其他页面的缓存也就失效了。
3.解决思路
将路由配置表中的所有路由拆分成两个操作，一个是保持原样供菜单显示，另一个是将路由配置表扁平化，将所有路由处理成二级路由，这样keep-alive就可以默认支持缓存。
4.处理过程
获取完整的路由配置。
常量模块=[]
files.keys()。forEach(key={
const filesObj=files(key)。默认文件(键)
Object.keys(filesObj)。forEach(keyOne={
modules.push(filesObj[keyOne])
})
})
完成操作路线配置。
export const menuList=modules//用于菜单显示
const routerList=formatwostageroutes(formatflateningroutes(模块))；//将路由展平为二级路由
const router=new VueRouter({
scrollBehavior: ()=({ y: 0 })，
模式：“历史”，
base: process.env.BASE_URL，
Routes: routerList，//在路由配置项中使用扁平路由。
})
展平方法
导出常量格式FlatteningRoutes=(routesList={
if (routesList.length=0)返回routesList
let list=[]；
routesList.forEach(v={
if(v.path===/) {
//用于添加初次测试的布局和主页。其他中心配置过滤掉布局和父节点，只保留子节点中的路由。
list . push(v)；
list=list . concat(formatflateningroutes(v . children))
} else if(v . children v . children . length 0){
list=list . concat(formatflateningroutes(v . children))
}否则{
list . push(v)；
}
})
退货单；
})
export const formatwostageroutes=list={
if (list.length=0)返回列表；
const routerList=[]；
list.forEach(v={
if (v.path===/) {
routerList.push({
组件：v .组件，
名称：v.name，
路径：v.path，
重定向：v .重定向，
meta: v.meta，
儿童：[]
})
} else if(v . path===/log in v . path===/showcasePage ){
//不需要配置布局的页面
routerList.push(v)
}否则{
routerList[0].children.push({.v })
}
})
返回routerList
}
这就是这篇关于vue中的保活多级路由缓存的文章。有关Vue中保持活动的多级路由缓存的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。