上次写了一篇 《前端权限管理之 addRoutes 动态加载路由踩坑》 ,得到了许多热心网友的点评并指出了其中的不足,其中针对转换的函数只能支持二级路由的情况,我对函数做了一次优化。
需求
-
将通过
pid
确认数组内元素上下级关系的数据格式转换成适合 element-ui 和 iview 等现代UI库渲染树形结构的属性,即通过children
确认上下级关系。 -
支持多层级关系的树形结构
流程图
实现代码
// 初始化路由信息对象
const menusMap = {};
let parentNode = {};
const root = [];
menus.map(v => {
const { path, name, component, redirect, hidden, meta } = v
let item = { // 重新构建路由对象
path,
name,
component: () => import(`@/views/${component}`), // 路由的文件路径
redirect,
hidden: Boolean(hidden) // 数据库表中存储为 0 和 1
}
meta.length !== 0 && (item.meta = JSON.parse(meta));
menusMap[v.id] = item;
// 判断是否为根节点
if (v.pid === 0) {
root.push(item);
} else {
parentNode = menusMap[v.pid];
!parentNode.children && (parentNode.children = []);
parentNode.children.push(item);
}
})
return root; // 返回已经转换完格式的结果
复制代码
萌新一枚,欢迎批评~