keep-alive不能缓存多层级路由菜单问题解决
这出现的原因是多级路由导致的，就是router-view嵌套在层级不同的router-view中切换tag会出现缓存数据失效的问题。⽬前keep-alive可以有效缓存⼀级，⼆级的路由菜单，3级以上菜单并不能做到缓存，这⾥提供⼀个解决⽅案：
在cachedViews中⼿动加上⼀级菜单和三级菜单之间，缺失的⼆级菜单的名字，这样⼆级菜单下的组件就会缓存了
实列代码如下：
const _import = require('@/router/_import_prodection');//获取组件的⽅法
import {tree} from '@/utils/treeDate'
import Layout from '@/views/layout'
import EmptyTemplate from '@/views/layout/EmptyTemplate'
export function filterAsyncRouter(routerlist) {
const routerlists=tree(routerlist )
//获取路由信息
function getRouter(routerlists){
routerlists.forEach(e => {
// 删除⽆⽤属性
delete e.catalogCode
delete e.catalogOrder
dpoints
delete e.fullOrder
// delete e.permName
// delete e.id
// delete e.parentId
e.name=e.catalogName
if (e.parentId === 0||e.children) {//Layout组件特殊处理
//路径为空时会因为undefind报错，给个默认值来解决
e.path = e.url||'nopath'
if(e.url.split('/').length>2){
/
/处理多层级路的时候给了⼀个空模板
eponent = EmptyTemplate
}else{
eponent = Layout
}
e.icon='setting-fill'
} else {
e.icon='circle'
eponent = _import(e.url)
//路径为空时会因为undefind报错，给个默认值来解决
e.path = e.url.split('/')[2]||'nopath'
}
// delete e.parentId
delete e.url
// if (e.redirect === '') {
//  direct
// }
if (e.icon !== '' && e.title !== '') { // 配置菜单标题与图标
// title: e.catalogName 中⽂名称
// catalogEngName 英⽂名称
title: e.catalogEngName,
titleZh:e.catalogName,
icon: e.icon
}
}
delete e.catalogName
delete e.icon
delete e.title
// delete e.name//由于名字的存在导致named 错误删掉
if (e.children != null) {
// 存在⼦路由就递归
getRouter(e.children)
}
})
return routerlists
}
const getRouters=getRouter(routerlists)
// return asyncRouterMap
return getRouters
}
空模板的代码如下：
<template>
<div>
<app-main/>
</div>
</template>
<script>
import { AppMain} from './components'
export default {
name:'EmptyTemplate',
components:{AppMain}
}
</script>
tagsViewd.js关键代码，在cachedViews中加⼊空模板的name
react router缓存
const state = {
visitedViews: [],
cachedViews: ['EmptyTemplate']
}
到此这篇关于keep-alive不能缓存多层级路由菜单问题解决的⽂章就介绍到这了，更多相关keep-alive不能多层缓存内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。