<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 基础的路由 生成的正确路由塞进这个里面
const DynamicRoutes = [
{
path:"",
name:'container',
redirect:"home",
meta:{
requiresAuth:true,
name:"首页"
},
children:[
{
path:"home",
name:"home",
meta:{
// 匹配规则
name:"首页",
icon:"icon-name"
}
}
]
},
{
path:"/403",
},
{
path:"*",
}
]
// 自定义的路由表
let obj = [
{
path: '/order',
name: 'order-manage',
meta: {
name: '订单管理',
icon: 'icon-email'
},
children: [
{
path: 'list',
name: 'order-list',
meta: {
name: '订单列表',
icon: 'icon-quit'
}
},
{
path: 'product',
name: 'product-manage',
meta: {
name: '生产管理',
icon: 'icon-service'
},
children: [
{
path: 'list',
name: 'product-list',
meta: {
name: '生产列表',
icon: 'icon-nav'
}
},
{
path: 'review',
name: 'review-manage',
meta: {
name: '审核管理',
icon: 'icon-finance-manage'
}
}
]
},
{
path: 'returnGoods',
name: 'return-goods',
meta: {
name: '退货管理',
icon: 'icon-product-manage'
}
}
]
},
{
path: '/goods',
name: 'goods',
meta: {
name: '产品管理',
icon: 'icon-order-manage'
},
children: [
{
path: 'list',
name: 'goods-list',
meta: {
name: '产品列表',
icon: 'icon-home'
}
},
{
path: 'classify',
name: 'goods-classify',
meta: {
name: '产品分类',
icon: 'icon-product-manage'
}
}
]
}
]
// 后台生成的正确路由 action这个是每个页面拥有的功能,没有就默认为空字符串
let new_obj = [
{
name: "订单管理",
children: [
{
name: "订单列表",
action: 'add,edit'
},
{
name: "生产管理",
children: [
{
name: "生产列表",
action: 'add,edit,del'
}
]
},
{
name: "退货管理",
action: 'add,del'
}
]
},
{
name: "产品管理",
children: [
{
name: "产品列表"
},
{
name: "产品分类"
}
]
}
]
// userRouter 后端返回的路由组 allRouter 前端生成的路由
function recursionRouter(userRouter = [], allRouter = []) {
var realRoutes = [];
allRouter.forEach((v, i) => {
userRouter.forEach((item, index) => {
if (item.name === v.meta.name) {
v.meta.action = item.action?item.action:''
if (item.children && item.children.length > 0) {
v.children = recursionRouter(item.children, v.children);
}
realRoutes.push(v)
}
})
})
return realRoutes;
}
let newList = recursionRouter(new_obj,obj)
let MainContainer = DynamicRoutes.find(v => v.path === "");
let children = MainContainer.children;
children.push(...newList)
console.log('根据后台返回的组成新的数组',DynamicRoutes)
</script>
</body>
</html>
05-31
3469
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-22
364
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-21
353
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-23
770
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-24
135
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)