vue-element-admin 超过两级嵌套路由无法缓存的解决办法
解决方法如下:
- 增加路由扁平化处理方法(src/store/modules/permission.js):
/**
* 生成扁平化机构路由(仅两级结构)
* @param {允许访问的路由Tree} accessRoutes
* 路由基本机构:
* {
* name: String,
* path: String,
* component: Component,
* redirect: String,
* children: [
* ]
* }
*/
function generateFlatRoutes(accessRoutes) {
let flatRoutes = [];for (let item of accessRoutes) {
let childrenFflatRoutes = [];
if (item.children && item.children.length > 0) {
childrenFflatRoutes = castToFlatRoute(item.children, "");
}// 一级路由是布局路由,需要处理的只是其子路由数据
flatRoutes.push({
name: item.name,
path: item.path,
component: item.component,
redirect: item.redirect,
children: childrenFflatRoutes
});
}return flatRoutes;
}/**
* 将子路由转换为扁平化路由数组(仅一级)
* @param {待转换的子路由数组} routes
* @param {父级路由路径} parentPath
*/
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
for (let item of routes) {
if (item.children && item.children.length > 0) {
if (item.redirect && item.redirect !== 'noRedirect') {
flatRoutes.push({
name: item.name,
path: (parentPath + "/" + item.path).substring(1),
redirect: item.redirect,
meta: item.meta
});
}
castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes);
} else {
flatRoutes.push({
name: item.name,
path: (parentPath + "/" + item.path).substring(1),
component: item.component,
meta: item.meta
});
}
}return flatRoutes;
}// 在原有的生成可访问路由方法中,增加路由扁平化处理,并返回扁平化处理后的结果,具体修改参看分割线部分:
const actions = {
generateRoutes({
commit
}, permissionKeys) {
return new Promise(resolve => {
let accessedRoutes = filterAsyncRoutes(asyncRoutes, permissionKeys, false)
// -------------------------- 分隔线 ----------------------------
let flatRoutes = generateFlatRoutes(accessedRoutes)commit('SET_ROUTES', accessedRoutes)
resolve(flatRoutes)
// -------------------------- /分隔线 ----------------------------
})
}
}- 为了方便后续维护,还是修改下vue-router钩子函数的变量名称吧(也可以不改):
// 拉取用户权限数据
const { permissions } = await store.dispatch('user/getInfo')// 这里把原来的 accessRoutes 修改成了 flatRoutes
const flatRoutes = await store.dispatch('permission/generateRoutes', permissions)// dynamically add accessible routes
router.addRoutes(flatRoutes)
- 为了方便后续维护,还是修改下vue-router钩子函数的变量名称吧(也可以不改):
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战