keep-alive不能缓存多层级路由菜单问题解决
这出现的原因是多级路由导致的，就是router-view嵌套在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案：
在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了
实列代码如下：
const_import=require('@/router/_import_prodection');//获取组件的方法
import{tree}from'@/utils/treeDate'
importLayoutfrom'@/views/layout'
importEmptyTemplatefrom'@/views/layout/EmptyTemplate'
exportfunctionfilterAsyncRouter(routerlist){
constrouterlists=tree(routerlist)
//获取路由信息
functiongetRouter(routerlists){
routerlists.forEach(e=>{
//删除无用属性
deletee.catalogCode
deletee.catalogOrder
deletee.endpoints
deletee.fullOrder
//deletee.permName
//deletee.id
//deletee.parentId
e.name=e.catalogName
if(e.parentId===0||e.children){//Layout组件特殊处理
//路径为空时会因为undefind报错，给个默认值来解决
e.path=e.url||'nopath'
if(e.url.split('/').length>2){
//处理多层级路的时候给了一个空模板
e.component=EmptyTemplate
}else{
e.component=Layout
}
e.icon='setting-fill'
}else{
e.icon='circle'
e.component=_import(e.url)
//路径为空时会因为undefind报错，给个默认值来解决
e.path=e.url.split('/')[2]||'nopath'
}
//deletee.parentId
deletee.url
//if(e.redirect===''){
//deletee.redirect
//}
if(e.icon!==''&&e.title!==''){//配置菜单标题与图标
e.meta={
//title:e.catalogName中文名称
//catalogEngName英文名称
title:e.catalogEngName,
titleZh:e.catalogName,
icon:e.icon
}
}
deletee.catalogName
deletee.icon
deletee.title
//deletee.name//由于名字的存在导致named错误删掉
if(e.children!=null){
//存在子路由就递归
getRouter(e.children)
}
})
returnrouterlists
}
constgetRouters=getRouter(routerlists)
//returnasyncRouterMap
returngetRouters
}
空模板的代码如下：
tagsViewd.js关键代码，在cachedViews中加入空模板的name
conststate={
visitedViews:[],
cachedViews:['EmptyTemplate']
}
到此这篇关于keep-alive不能缓存多层级路由菜单问题解决的文章就介绍到这了,更多相关keep-alive不能多层缓存内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。