1.vue静态路由
const dynamicRoutes = [
{
path: '/',
name: '/',
component: () => import('/@/layout/index.vue'),
redirect: '/home',
meta: {
isKeepAlive: true,
},
children: [
{
path: '/home',
name: 'home',
component: () => import('/@/views/home/index.vue'),
meta: {
title: '首页',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
roles: ['admin', 'common'],
icon: 'iconfont icon-shouye',
},
},
{
path: '/system',
name: 'system',
component: () => import('/@/layout/routerView/parent.vue'),
redirect: '/system/sysApp',
meta: {
title: '配置',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-shezhi',
},
children: [
{
path: '/system/sysApp',
name: 'sysApp',
component: () => import('/@/views/system/sysApp/index.vue'),
meta: {
title: '平台管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-pingtai',
},
},
{
path: '/system/sysModule',
name: 'sysModule',
component: () => import('/@/views/system/sysModule/index.vue'),
meta: {
title: '菜单管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caidan',
},
},
// {
// path: '/system/menu',
// name: 'menu',
// component: () => import('/@/views/system/menu/index.vue'),
// meta: {
// title: '菜单管理2',
// isLink: '',
// isHide: false,
// isKeepAlive: true,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caidan',
// },
// },
{
path: '/system/sysRole',
name: 'sysRole',
component: () => import('/@/views/system/sysRole/index.vue'),
meta: {
title: '角色管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-ColdDrink',
},
},
{
path: '/system/sysCompany',
name: 'sysCompany',
component: () => import('/@/views/system/sysCompany/index.vue'),
meta: {
title: '公司管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-SetUp',
},
},
{
path: '/system/sysUser',
name: 'sysUser',
component: () => import('/@/views/system/sysUser/index.vue'),
meta: {
title: '用户管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-yonghu',
},
},
{
path: '/system/sysDictionary',
name: 'sysDictionary',
component: () => import('/@/views/system/sysDictionary/index.vue'),
meta: {
title: '字典管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-SetUp',
},
},
{
path: '/system/sysGroups',
name: 'sysGroups',
component: () => import('/@/views/system/sysGroups/index.vue'),
meta: {
title: '群组管理',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'ele-SetUp',
},
},
],
},
{
path: '/basicInfo',
name: 'basicInfo',
component: () => import('/@/layout/routerView/parent.vue'),
redirect: '/basicInfo/basegroup',
meta: {
title: '信息',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-xitongshezhi',
},
children: [
{
path: '/basicInfo/basegroup',
name: 'basegroup',
component: () => import('/@/views/basicInfo/basegroup/index.vue'),
meta: {
title: '工作中心',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caidan',
},
},
{
path: '/basicInfo/baseperson',
name: 'baseperson',
component: () => import('/@/views/basicInfo/baseperson/index.vue'),
meta: {
title: '组织人员',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caidan',
},
},
],
},
],
},
];
2.后端路由
{
"results": [
{
"id": 110,
"moduleNo": "d53a5f36e8334a8ba3f077a6db05895c",
"moduleName": "配置",
"moduleEnName": "peizhi",
"parentNo": "",
"icon": "iconfont icon-shezhi",
"url": "/system",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "3af9c1e11896443daff0e049edf07c29",
"createName": "admin",
"createTime": "2023-09-14 11:11:05",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "system",
"childrenCount": 7,
"hasChildren": true,
"lstChildrenModule": [
{
"id": 120,
"moduleNo": "73e6b2244b1b40cc8bf513506e8e284b",
"moduleName": "字典管理",
"moduleEnName": "zidianguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-anniu",
"url": "/sysDictionary",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:57:06",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 0,
"routerName": "sysDictionary",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 111,
"moduleNo": "4808e68aaff647609ef37e8759da21ea",
"moduleName": "平台管理",
"moduleEnName": "pingtaiguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-pingtai",
"url": "/sysApp",
"category": "",
"target": "",
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "3af9c1e11896443daff0e049edf07c29",
"createName": "admin",
"createTime": "2023-09-14 11:16:16",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "sysApp",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 116,
"moduleNo": "72e09c117beb4afeae3cf36aeae0fdab",
"moduleName": "菜单管理",
"moduleEnName": "caidanguanl",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-caidan",
"url": "/sysModule",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:53:54",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "sysModule",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 117,
"moduleNo": "cc1594e4156f4546957faec94a565857",
"moduleName": "角色管理",
"moduleEnName": "juseguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-juese",
"url": "/sysRole",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:55:01",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "sysRole",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 118,
"moduleNo": "9b3ed039d79b4111a1dafbac59fc287f",
"moduleName": "公司管理",
"moduleEnName": "gongsiguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "ele-ElemeFilled",
"url": "/sysCompany",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:56:00",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "sysCompany",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 119,
"moduleNo": "e8489aa9a2c54c69b65a6a7ced6bb9e2",
"moduleName": "用户管理",
"moduleEnName": "yonghuguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-yonghu",
"url": "/sysUser",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:56:31",
"updator": "94e2e6aa44fc42afb22c164d8d5be430",
"updateName": "admin",
"updateTime": "2023-09-14 14:54:19",
"isDelete": false,
"sort": 1,
"routerName": "sysUser",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
},
{
"id": 121,
"moduleNo": "8425aba782c840a19c64f9414736204a",
"moduleName": "群组管理",
"moduleEnName": "qunzhuguanli",
"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
"icon": "iconfont icon-bumenxiangqing",
"url": "/sysGroups",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:57:38",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "sysGroups",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
}
]
},
{
"id": 114,
"moduleNo": "1c027bf887a14b3eb1a0a680f721cf73",
"moduleName": "信息",
"moduleEnName": "xinxi",
"parentNo": "",
"icon": "iconfont icon-shujuzidian",
"url": "/info",
"category": null,
"target": null,
"appNo": "b26af72992be48a3b9024e68e2e8054a",
"creator": "94e2e6aa44fc42afb22c164d8d5be430",
"createName": "admin",
"createTime": "2023-09-14 11:33:43",
"updator": null,
"updateName": null,
"updateTime": null,
"isDelete": false,
"sort": 1,
"routerName": "info",
"childrenCount": 0,
"hasChildren": false,
"lstChildrenModule": []
}
],
"pageModel": {
"pageIndex": 1,
"pageSize": 20,
"totalCount": 0,
"pageTotal": 0
},
"msg": null,
"code": 0,
"hasErr": false,
"data": null,
"expandSeconds": 0.0340284
}
3.递归方法处理静态路由为主
//后端返回的接口 res.results 的数据
let data= await resetBackEndData(res.results,dynamicRoutes[0].children)
//重新处理的结果
console.log(data)
/**
* @version ken 这里的方法是根据自己实际后端返回的数据进行二次整理,如果后端返回就是根据route.js 格式返回的就不需要调用此方法
* @description 自定义二次方法
* @description 自定义二次方法
*/
export function resetBackEndData(apiMenus,localRoutes){
//首页不需要加权限控制,如需要则首先情况list数组,同时
const list = []
localRoutes.filter(item => apiMenus.some(ele => {
if (item.children && item.children.length) {
const routeChild = resetBackEndData(ele.lstChildrenModule ?? [], item.children ?? [])
if (routeChild.length) item.children = routeChild
}
// 筛选条件
if (item.name==ele.routerName) {
//给路由赋值编号,可通过编号获取按钮权限
item.moduleNo=ele.moduleNo
list.push(item)
}
}));
return list
}
