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

黑色咖啡 Ken2023-09-19 13:34

1.vue静态路由

javascript 复制代码 
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.后端路由

javascript 复制代码 
{
	"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.递归方法处理静态路由为主

javascript 复制代码 
//后端返回的接口 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
}
相关推荐
小马哥编程8 分钟前
Function.prototype和Object.prototype 的区别
javascript
小白学前端6669 分钟前
React Router 深入指南：从入门到进阶
前端·react.js·react
苹果醋39 分钟前
React系列（八）——React进阶知识点拓展
运维·vue.js·spring boot·nginx·课程设计
web1309332039829 分钟前
前端下载后端文件流，文件可以下载，但是打不开，显示“文件已损坏”的问题分析与解决方案
前端
王小王和他的小伙伴32 分钟前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
学前端的小朱36 分钟前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
outstanding木槿41 分钟前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08211 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光931 小时前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）