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

路由菜单路径匹配方法

优化路由菜单路径匹配算法:实现获取整条线路的路径

引言

在前端开发中,路由菜单的路径匹配是一个常见的需求。我们经常需要根据给定的路径,找到对应的菜单项,并获取整条线路的路径。本文将介绍一个优化的路由菜单路径匹配算法,以实现这一功能。

问题描述

假设我们有一个路由菜单的数据结构,如下所示:

let menuList = [{path: "D", children: [{ path: "D1" },{ path: "D2", children: [{ path: "D-2-1" }]},{ path: "D3", children: [{ path: "D-3-1"}]}]},{path: "E", children: [{ path: "E1" },{ path: "E2", children: [{ path: "E-2-1" }]},{ path: "E3", children: [{ path: "E-3-1"}]}]},{path: "A", children: [{ path: "B", children: [{ path: "C"}]}]}
];

我们的目标是编写一个函数 filterAuMenu(menuList, target),该函数接受一个菜单列表 menuList 和一个目标路径 target,并返回匹配目标路径的菜单项及其所在的整条线路的路径。

算法优化

为了提高算法的效率和可读性,我们对原有的算法进行了优化。以下是优化后的代码:

export function filterAuMenu(menuList, target) {for (let item of menuList) {if (item.path === target) {return [item];}if (item.children && item.children.length > 0) {let childResult = filterAuMenu(item.children, target);if (childResult) {return [item, ...childResult];}}}return null;
}

通过递归地遍历菜单列表,我们首先检查当前菜单项的路径是否与目标路径匹配。如果匹配成功,我们返回该菜单项作为结果。
如果当前菜单项有子菜单,并且子菜单不为空,我们递归调用 filterAuMenu 函数,继续在子菜单中查找目标路径。
如果找到了匹配的路径,我们将当前菜单项与子菜单的结果合并,并返回整条线路的路径。
如果遍历完所有菜单项后仍未找到匹配的路径,我们返回 null

实现效果

通过优化后的算法,我们实现了一个能够获取整条线路路径的函数。
例如,当我们调用 filterAuMenu(menuList, “E-2-1”) 时,将返回以下结果:

[{ path: "E" },{ path: "E2" },{ path: "E-2-1" }
]

这个结果包含了目标路径 “E-2-1” 对应的菜单项以及整条线路的路径。

总结

本文介绍了一个优化的路由菜单路径匹配算法,通过递归遍历菜单列表,我们能够高效地获取整条线路的路径。这个优化后的算法在效率和可读性方面都有所提升,能够满足我们在前端开发中对路由菜单路径匹配的需求。

相关文章:

路由菜单路径匹配方法

优化路由菜单路径匹配算法:实现获取整条线路的路径 引言 在前端开发中,路由菜单的路径匹配是一个常见的需求。我们经常需要根据给定的路径,找到对应的菜单项,并获取整条线路的路径。本文将介绍一个优化的路由菜单路径匹配算法&…...

设计模式浅析(九) ·模板方法模式

设计模式浅析(九) 模板方法模式 日常叨逼叨 java设计模式浅析,如果觉得对你有帮助,记得一键三连,谢谢各位观众老爷😁😁 模板方法模式 概念 模板方法模式(Template Method Pattern)在Java中是…...

无用工作、UBI与AI

有些隐晦和黑暗的事实无法陈述,因为任何的系统中“无用”的结局都是被无情的抛弃和淘汰,AI监督下的人类结局更是如此。 什么是无用工作? 无用无效工作通常指的是那些看似忙碌但实际上对社会或个人没有实质性贡献的工作。这类工作可能包括以下…...

【监控】grafana图表使用快速上手

目录 1.前言 2.连接 3.图表 4.job和path 5.总结 1.前言 上一篇文章中,我们使用spring actuatorPrometheusgrafana实现了对一个spring boot应用的可视化监控。 【监控】Spring BootPrometheusGrafana实现可视化监控-CSDN博客 其中对grafana只是打开了一下&am…...

Django常用命令

一、新建一个新项目 django-admin startproject project_name二、新建一个app 在Django中的一个app代表一个功能模块。开发者可以将不同功能的模块放在不同的app中, 方便代码的复用。 python manage.py startapp appa_name三、数据迁移(更新数据库) 编写好了Model后&#x…...

【center-loss 中心损失函数】 原理及程序解释(更新中)

文章目录 前言问题引出open-set问题抛出 解决方法softmax函数、softmax-loss函数解决代码(center_loss.py)原理程序解释 如何梯度更新首先了解一下基本的梯度下降算法然后 前言 学习一下: 中心损失函数,用于用于深度人脸识别的特…...

什么是 HTTPS 证书?作用是什么?

HTTPS 证书,即超文本传输安全协议证书(Hypertext Transfer Protocol Secure),是网站安全的关键组成部分。它通过 SSL/TLS 加密协议,确保用户与网站之间的数据传输是加密和安全的。 什么是 HTTPS 证书? HT…...

为什么软考报名人数越来越多?

2020年软考报名人数404666人,广东省报考人数超过14万人。 ●2021年软考通信考试报名人数突破100万人,估计软考有90多万。 ●2022年软考通信考试共129万人,估计软考占了120多万人。 ●2023年软考具体报名人数没有公布,但工业和信…...

【投稿优惠|快速见刊】2024年图像,机器学习和人工智能国际会议(ICIMLAI 2024)

【投稿优惠|快速见刊】2024年图像,机器学习和人工智能国际会议(ICIMLAI 2024) 重要信息 会议官网:http://www.icimlai.com会议地址:深圳召开日期:2024.03.30截稿日期:2024.03.20 (先…...

html2canvas 将DOM节点转成图片

官网地址:html2canvas - Screenshots with JavaScript 将js文件保存到本地 可以新建一个txt文件,然后丢进去修改后缀名称即可。 在项目中引入js文件: import html2canvas from "../html2canvas.min.js" 这是我准备画的DOM节点。…...

【多线程】常见锁策略详解(面试常考题型)

目录 🌴 乐观锁 vs 悲观锁🎍重量级锁 vs 轻量级锁🍀自旋锁(Spin Lock)🎋公平锁 vs ⾮公平锁🌳可重⼊锁 vs 不可重⼊锁🎄读写锁⭕相关面试题 常⻅的锁策略 注意: 接下来讲解的锁策略不…...

Python列表操作函数

在Python中,列表(list)是一种可变的数据类型,它包含一系列有序的元素。Python提供了一系列内置的函数和方法来操作列表。以下是一些常用的Python列表操作函数和方法: 列表方法 append(x) 将元素x添加到列表的末尾。 …...

Qt注册类对象单例与单类型区别

1.实现类型SingletonTypeExample #ifndef SINGLETONTYPEEXAMPLE_H #define SINGLETONTYPEEXAMPLE_H#include <QObject>class SingletonTypeExample : public QObject {Q_OBJECT public://只能显示构造类对象explicit SingletonTypeExample(QObject *parent nullptr);//…...

Rocky Linux 运维工具yum

一、yum的简介 ​​yum​是用于在基于RPM包管理系统的包管理工具。用户可以通过 ​yum​来搜索、安装、更新和删除软件包&#xff0c;自动处理依赖关系&#xff0c;方便快捷地管理系统上的软件。 二、yum的参数说明 1、install 用于在系统的上安装一个或多个软件包 2、seach 用…...

linux下的ollama

refs: https://github.com/ollama/ollama/blob/main/docs/linux.md 1)安装 curl -fsSL https://ollama.com/install.sh | sh 2)修改服务配置&#xff0c;打开端口允许所有IP地址 refs(https://github.com/ollama/ollama/blob/main/docs/faq.md#where-are-models-stored) C…...

YOLOv9详细解读,改进提升全面分析(附YOLOv9结构图)

&#x1f951; Welcome to Aedream同学 s blog! &#x1f951; 文章目录 1. 概要1.1 模型结构上的改动:1.2 训练脚本上的改动&#xff1a; 2. 介绍2.1 背景2.2 主要贡献 3. 总体框架3.1 可编程梯度信息&#xff08;PGI&#xff09;3.1.1 辅助可逆分支3.1.2 多级辅助信息 3.2 Ge…...

html基础操练和进阶修炼宝典

文章目录 1.超链接标签2.跳锚点3.图片标签4.表格5.表格的方向属性6.子窗口7.音视频标签8.表单9.文件上传10.input属性 html修炼必经之路—各种类型标签详解加展示&#xff0c;关注点赞加收藏&#xff0c;防止迷路哦 1.超链接标签 <!DOCTYPE html> <html lang"en…...

从Mysql 数据库删除重复记录只保留其中一条(删除id最小的一条)

准备工作&#xff1a;新建表tb_coupon /*Navicat Premium Data TransferSource Server : rootlocalhostSource Server Type : MySQLSource Server Version : 50527Source Host : localhost:3306Source Schema : leyouTarget Server Type : My…...

从http到websocket

阅读本文之前&#xff0c;你最好已经做过一些websocket的简单应用 从http到websocket HTTP101HTTP 轮询、长轮询和流化其他技术1. 服务器发送事件2. SPDY3. web实时通信 互联网简史web和httpWebsocket协议1. 简介2. 初始握手3. 计算响应健值4. 消息格式5. WebSocket关闭握手 实…...

UE5 C++ Widget练习 Button 和 ProgressBar创建血条

一. 1.C创建一个继承Widget类的子类&#xff0c; 命名为MyUserWidget 2.加上Button 和 UserWidget的头文件 #include "CoreMinimal.h" #include "Components/Button.h" #include "Blueprint/UserWidget.h" #include "MyUserWidget.genera…...

JAVA智能配电房管理系统源码:含数据字典、完整文档及多种功能实现

JAVA智能配电房管理系统源码带数据字典及完整文档JAVA智能配电房管理系统源码带数据字典及完整文档实现各模块数据显示&#xff0c;报警显示&#xff0c;报表导出功能。 此次监控的电力系统有两个配电房&#xff0c;总共四个变压器&#xff0c;54条供电线路。 能通过电路拓扑图…...

突破微信OAuth2.0单回调域名限制的实战方案

1. 微信OAuth2.0单回调域名限制的痛点 做过微信网页开发的同行应该都遇到过这个经典问题&#xff1a;在微信公众平台配置网页授权域名时&#xff0c;一个公众号只能设置一个回调域名。这个限制对于单一应用场景影响不大&#xff0c;但当我们需要同时运营多个子站点或微官网时&a…...

从零到一:用ima构建你的专属知识大脑【手把手教学】

1. 为什么你需要一个"第二大脑"&#xff1f; 每天早上打开电脑&#xff0c;你是不是也和我一样&#xff0c;面对满桌面的文档、收藏夹里几百个未读网页、微信里收藏的无数文章感到无从下手&#xff1f;我们的大脑就像一台内存有限的电脑&#xff0c;每天接收海量信息…...

分布式系统中的命名与保护:构建高效安全的命名空间与加密机制

1. 分布式系统中的命名空间设计 第一次接触分布式系统时&#xff0c;最让我头疼的就是命名问题。想象一下&#xff0c;你要在几十台服务器上管理数百万个文件&#xff0c;每个文件可能有多个别名&#xff0c;还要支持跨机器访问——这就像在迷宫般的图书馆里找书&#xff0c;而…...

如何快速解密SWF文件:JPEXS逆向工具的完整指南

如何快速解密SWF文件&#xff1a;JPEXS逆向工具的完整指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款专业的开源SWF解密工具&#xff0c;专门用…...

CNN 模型压缩:剪枝、量化与知识蒸馏

CNN 模型压缩&#xff1a;剪枝、量化与知识蒸馏 核心结论 剪枝&#xff1a;移除冗余权重&#xff0c;减少模型参数量和计算量量化&#xff1a;降低权重和激活值的精度&#xff0c;减少存储和计算开销知识蒸馏&#xff1a;将大型模型的知识迁移到小型模型性能对比&#xff1a;不…...

从视频到词语:基于Yolov5与3DResNet-GRU的端到端唇语识别实战

1. 唇语识别技术入门&#xff1a;为什么选择Yolov53DResNet-GRU组合&#xff1f; 想象一下这样的场景&#xff1a;你在嘈杂的酒吧里&#xff0c;朋友对你说了句话但完全听不清。这时候你可能会下意识地盯着对方的嘴唇&#xff0c;试图通过嘴型变化理解意思。这就是人类天然的&q…...

Python 中使用 keyboard 模块时多线程导致键盘监听冻结的解决方案

本文详解 keyboard 模块在多线程&#xff08;尤其配合 asyncio&#xff09;环境下调用 is_pressed()、read_event() 等函数时无响应、卡死的根本原因&#xff0c;并提供稳定替代方案——推荐使用 Windows 原生 msvcrt 模块实现非阻塞、可中断、线程安全的键盘输入检测。 本…...

Bootstrap 5栅格系统的五列等分布局方案

Bootstrap 5 原生不支持 col-5 类&#xff0c;因其栅格基于12等分&#xff0c;5非因数&#xff1b;推荐用 row-cols-5 实现五等分&#xff0c;或自定义 flex: 0 0 20% 类并处理断点、gutters 和溢出。Bootstrap 5 原生不支持 col-5 类&#xff0c;别硬套命名规则Bootstrap 5 的…...

生成式AI编码助手:效率提升50%的实操

在软件测试领域&#xff0c;时间就是质量。随着生成式AI编码助手的崛起&#xff0c;测试从业者正迎来一场效率革命——将繁琐的手动任务自动化&#xff0c;将测试覆盖率提升至新高度。数据显示&#xff0c;合理应用AI工具可将测试效率提升50%以上&#xff0c;这不是未来预言&am…...