对比图

JSON数据(树状)
menus 请求的角色的菜单路由
const menus = [
{
"menuId": 39,
"name": "营销",
"path": "marketing",
"children": [
{
"menuId": 56,
"name": "优惠券",
"path": "coupon",
"children": null
},
{
"menuId": 316,
"name": "积分商城",
"path": "integralMall",
"children": [
{
"menuId": 320,
"name": "分类管理",
"path": "sortManagement",
"children": null
},
{
"menuId": 322,
"name": "兑换记录",
"path": "exchangeRecord",
"children": null
}
]
}
]
}
]
asyncRoutes 本地所有的菜单路由
const asyncRoutes = [
{
"title": "营销",
"name": "marketing",
component: {...},
"children": [
{
"title": "优惠券",
"name": "coupon",
"component": {...},
"children": null
},
{
"title": "整点秒杀",
"name": "seckilling",
"component": {...},
"children": null
},
{
"title": "积分商城",
"name": "integralMall",
"component": {...},
"children": [
{
"title": "分类管理",
"name": "sortManagement",
"component": {...},
"children": null
},
{
"title": "兑换记录",
"name": "exchangeRecord",
"component": {...},
"children": null
}
]
}
]
}
]
递归方法
const _arrRoutes = (menus, localRoutes) => {
const list = []
localRoutes.filter(item => menus.some(ele => {
if (item.children && item.children.length) {
const routeChild = _arrRoutes(ele.children ?? [], item.children ?? [])
if (routeChild.length) item.children = routeChild
}
if (item.name === ele.path) {
list.push(item)
}
}))
return list
}
调用方法
const routes = _arrRoutes(menus, asyncRoutes)
console.log(routes, '筛选后的数据')