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
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/79645.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

链表oj题 链表与LinkedList 栈的概念 队列的概念 树和二叉树

链表oj题 链表与LinkedList 栈的概念 队列的概念 树和二叉树

第 1 题（编程题） 题目名称： 求环的入口点 题目内容： 求环的入口点https://leetcode-cn.com/problems/linked-list-cycle-ii/description/ 第 2 题（编程题） 题目名称： 判断链表带环 题目…
阅读更多...
软件设计模式(二)：工厂、门面、调停者和装饰器模式

软件设计模式(二)：工厂、门面、调停者和装饰器模式

前言 在这篇文章中，荔枝将会梳理软件设计模式中的四种：工厂模式、Facade模式、Mediator模式和装饰器Decorator模式。其中比较重要的就是工厂模式和装饰器模式，工厂模式在开发中使用的频数比较高。希望荔枝的这篇文章能讲清楚哈哈哈哈&#xf…
阅读更多...
Ceph入门到精通-ceph对于长文件名如何处理

Ceph入门到精通-ceph对于长文件名如何处理

RADOS object with short name 上一篇博文，我们将介绍了对象相关的数据结构ghobject_t，以及对象在底层文件系统存储的文件名，以及如何从文件名对应到 ghobject_t对象。 映射关系如下图所示： 这里面有一个漏洞，即obje…
阅读更多...
【栈与队列面试题】有效的括号（动图演示）

【栈与队列面试题】有效的括号（动图演示）

leetcode20.括号匹配问题 前言： 💥🎈个人主页:​​​​​​Dream_Chaser～ 🎈💥 ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上栈与队列的面试OJ题目 目录 leetcode20.括号匹配问题 1.问题描…
阅读更多...
华硕电脑怎么录屏？分享实用录制经验！

华硕电脑怎么录屏？分享实用录制经验！

“华硕电脑怎么录屏呀，刚买的笔记本电脑，是华硕的，自我感觉挺好用的，但是不知道怎么录屏，最近刚好要录一个教程，怎么都找不到在哪里录制，有人能教教我吗？” 随着电脑技术的不断发展…
阅读更多...
低代码开源项目整理

低代码开源项目整理

低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。下面就来分享几个值得学习和使用的前端低代码开源项目，更深入地了解什…
阅读更多...
如何实现微服务

如何实现微服务

一、问题拆解 1.1、客户端如何访问这些服务 原来的Monolithic方式开发，所有的服务都是本地的，UI可以直接调用；现在按功能拆分成独立的服务，跑在独立的虚拟机上的Java进程了。客户端UI如何访问他的？ 后台有N个服务&a…
阅读更多...
CSS - 鼠标移入整行高亮显示，适用于会员套餐各参数对比页面（display: table，div 转表格形式）

CSS - 鼠标移入整行高亮显示，适用于会员套餐各参数对比页面（display: table，div 转表格形式）

效果图 可根据基础示例和进阶示例&#xff0c;复制进行改造样式。 如下图所示&#xff0c;本文提供 2 个示例。 基础示例 找个 HTML 页面&#xff0c;一键复制运行。 <body><h1 style"text-align: center;">基础示例</h1><section class"…
阅读更多...
初试小程序轮播组件

初试小程序轮播组件

文章目录 一、轮播组件&#xff08;一&#xff09;swiper组件1、功能描述2、属性说明 &#xff08;二&#xff09;swiper-item组件1、功能描述2、属性说明 &#xff08;三&#xff09;轮播组件使用基本语法 二、案例演示&#xff08;一&#xff09;运行效果&#xff08;二&…
阅读更多...
idea搭建项目找不到Tomcat

idea搭建项目找不到Tomcat

idea搭建项目找不到Tomcat_idea没有tomcat配置项_ZYRL的博客-CSDN博客
阅读更多...
【Spring事务底层实现原理】

【Spring事务底层实现原理】

Transactional注解 Spring使用了TransactionInterceptor拦截器&#xff0c;该拦截器主要负责事务的管理&#xff0c;包括开启、提交、回滚等操作。当在方法上添加Transactional注解时&#xff0c;Spring会在AOP框架中对该方法进行拦截&#xff0c;TransactionInterceptor会在该…
阅读更多...
JavaEE初阶（5）多线程案例（定时器、标准库中的定时器、实现定时器、线程池、标准库中的线程池、实现线程池）

JavaEE初阶（5）多线程案例（定时器、标准库中的定时器、实现定时器、线程池、标准库中的线程池、实现线程池）

接上次博客&#xff1a;JavaEE初阶&#xff08;4&#xff09;&#xff08;线程的状态、线程安全、synchronized、volatile、wait 和 notify、多线程的代码案例&#xff1a;单例模式——饿汉懒汉、阻塞队列&#xff09;_di-Dora的博客-CSDN博客 目录 多线程案例 定时器 标准…
阅读更多...
[JAVAee]Linux上的javax.mail报错

[JAVAee]Linux上的javax.mail报错

我们把在window写的项目部署到Linux上的Tomcat时,如果发现使用不了了,该如何找到错误呢?找到报错的地方在哪呢? 在Linux环境下来到Tomcat目录下的logs目录,输入: tail -f catalina.out -n 500 tail 就是把文件的末尾几行读取到终端上,并会持续刷新 -f 循环读取 catalina.ou…
阅读更多...
9.19-21，openEuler与您相约2023欧洲开源峰会

9.19-21，openEuler与您相约2023欧洲开源峰会

2023年9月19日-21日&#xff0c;openEuler将参加在西班牙毕尔巴鄂举办的 OSSUMMIT 2023&#xff08;Open Source Summit Europe 2023&#xff09;&#xff0c;这是openEuler继去年正式亮相后的第二次全面参加该峰会。 Open Source Summit Europe是由Linux基金会主办&#xff0…
阅读更多...
【css面试题】实现2栏布局 右侧自适应； 3栏布局 中间自适应

【css面试题】实现2栏布局 右侧自适应； 3栏布局 中间自适应

2栏布局 右侧自适应 flex grid table float <style >body{height: 400px;}.son1{width: 20%;height: 100%;float: left;}.son2{margin-left: 20%;height: 100%;}</style> <body> <div class"son1" style"background-color: #d2…
阅读更多...
verdi dump状态机的波形时直接显示状态名

verdi dump状态机的波形时直接显示状态名

前段时间看到别人用verdi看状态机的波形时&#xff0c;可以显示定义的状态参数&#xff0c;觉得很有意思&#xff0c;特地学习了一下 通常拉出状态机信号的波形是下面这样的 这种信号&#xff0c;我们要想知道每个数值代表的状态&#xff0c;还需要跟定义的parameter比对 像这…
阅读更多...
[DB]数据库--lowdb

[DB]数据库--lowdb

[DB]数据库--lowdb lowdb基本应用获取数据数据变更写入文件 lodash的使用获取数据lodash方法使用数据变更写入文件 lowdb lowdb ,是一个基于文件存储的非关系型数据库 基于loadsh的轻量级数据库 可用于在json中存储数据&#xff0c;大小一般为0~200M的json文件 方便简单的数…
阅读更多...
棒球教学知识架构·棒球1号位

棒球教学知识架构·棒球1号位

棒球教学知识架构 1. 棒球运动的基本认知 棒球运动的起源和发展历程 棒球运动起源于19世纪中叶的美国&#xff0c;最初是一种儿童游戏&#xff0c;使用木棒和石头或木头制成的球进行比赛。后来&#xff0c;人们开始使用橡胶球和棒子&#xff0c;并规定了比赛规则和场地标准&a…
阅读更多...
【Flowable】任务监听器（五）

【Flowable】任务监听器（五）

前言 之前有需要使用到Flowable&#xff0c;鉴于网上的资料不是很多也不是很全也是捣鼓了半天&#xff0c;因此争取能在这里简单分享一下经验&#xff0c;帮助有需要的朋友&#xff0c;也非常欢迎大家指出不足的地方。 一、监听器 在Flowable中&#xff0c;我们可以使用监听…
阅读更多...
Android 实战项目分享（一）用Android Studio绘制贝塞尔曲线的艺术之旅

Android 实战项目分享（一）用Android Studio绘制贝塞尔曲线的艺术之旅

一、项目概述 欢迎来到创意之源&#xff01;我们精心打造的绘图应用程序将带你进入一个充满艺术和技术的奇妙世界。通过使用Android Studio&#xff0c;我们实现了绘制贝塞尔曲线的功能&#xff0c;让你能够轻松创作出令人惊叹的艺术作品。不论你是热爱绘画的大学生还是渴望学习…
阅读更多...
最新文章

Copyright @ 2022~2023