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
}
相关推荐
丁总学Java9 分钟前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
It'sMyGo19 分钟前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式
懒羊羊大王呀20 分钟前
CSS——属性值计算
前端·css
李是啥也不会35 分钟前
数组的概念
javascript
道爷我悟了1 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
无咎.lsy1 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
fishmemory7sec1 小时前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron
fishmemory7sec1 小时前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
工业互联网专业1 小时前
毕业设计选题：基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
豆豆2 小时前
为什么用PageAdmin CMS建设网站？
服务器·开发语言·前端·php·软件构建
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache