当前位置： 首页 > news >正文

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

news 2025/7/15 10:51:13

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
}

http://www.lryc.cn/news/167111.html

相关文章：

  • JSP SSM 成果展示系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
  • 脚本：python绘制七夕爱心
  • L1 项目概述与Hadoop部署
  • 关键词文章生成器-标题文章生成器
  • 深入了解MySQL中的JSON_ARRAYAGG和JSON_OBJECT函数
  • Ubuntu22.04开启后屏幕黄屏
  • 华为云云耀云服务器L实例评测 | 搭建docker环境
  • exesql=“UPDATE test set date=‘%s‘“ % date 是啥意思
  • 请体验一下falcon 180b 大语言模型的感觉
  • 今晚8点，iPhone15开启预售
  • Meetup 回顾｜Data Infra 研究社第十五期（含资料发布）
  • I2S/PCM知识点记录
  • 微信小程序——使用 Vant 组件实现 Popup 弹出层（各位置弹出详细代码分享）
  • linux查看python的py文件的命令
  • 开源库源码分析：Okhttp源码分析(一)
  • 无涯教程-JavaScript - LOOKUP函数
  • 这所院校太好考了！地处魔都！不要错过！
  • Python - PyQt6、QDesigner、pyuic5-tool 安装使用
  • C语言——指针进阶（三）
  • 三勾商城（java+vue3）微信小程序商城+SAAS+前后端源码
  • 【洁洁送书第七期】现在学 Java 找工作还有优势吗
  • npm发布自定义vue组件库
  • 9.12 C++作业
  • 利用LinuxPTP进行时间同步(软/硬件时间戳) - 研一
  • 《极客时间：左耳听风——程序员练级攻略》【文章笔记个人思考】
  • Springboot 实践（15）spring config 配置与运用—自动刷新
  • FirmAFL
  • SpringMVC的整合完成CRUD(增删改查)
  • Postman使用_Tests Script（断言测试）
  • 问道管理：华为概念股捷荣技术13天10板，监管质疑迎合热点炒作