vue路由-两个树形结构数据-递归处理方法

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.moduleNolist.push(item)}}));return list
}