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

vue3的路由配置

news 来源：原创 2025/5/13 22:47:01

先找到Layout布局文件，从中找到左侧边栏，找到下述代码

<SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />/**
*菜单项 <SidebarItem>:
*使用v-for循环遍历noHiddenRoutes数组，为每个路由生成一个<SidebarItem>组件。
*:key="route.path"：为每个<SidebarItem>提供唯一的键值，这是Vue中优化DOM更新的一种方式。
*:item="route" 和 :base-path="route.path"：将当前路由对象和路径作为属性传递给<SidebarItem>。
*/

查看noHiddenRoutes数组

const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
//从 permissionStore 中获取路由列表，过滤掉 meta.hidden 为 true 的路由，保留未隐藏的路由。

查看permissionStore，找到下述与展示路由有关代码

/** 根据角色生成可访问的 Routes（可访问的路由 = 常驻路由 + 有访问权限的动态路由） */const setRoutes = (roles: string[]) => {const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}

查看 filterDynamicRoutes 函数

const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {//过滤动态数组console.log(12345)//被打印，说明这个函数被调用const res: RouteRecordRaw[] = []console.log(routes,'4444')routes.forEach((route) => {const tempRoute = { ...route }console.log(333333)//没有被打印，说明两者之间的内容不被执行if (hasPermission(roles, tempRoute)) {if (tempRoute.children) {tempRoute.children = filterDynamicRoutes(tempRoute.children, roles)}res.push(tempRoute)}})return res
}

在12345和333333之间的函数 routes.forEach((route) 作用是遍历 routes 数组，此时我们打印 routes 的值，发现打印结果是个空数组[]，说明这个数组没有被传递进来。

这个函数是filterDynamicRoutes 的定义，那么我们找到使用这个函数的地方，看入参是什么

  /** 根据角色生成可访问的 Routes（可访问的路由 = 常驻路由 + 有访问权限的动态路由） */const setRoutes = (roles: string[]) => {console.log('2222222')const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}

我们发现入参 routes 是 dynamicRoutes 动态路由，跳转到 dynamicRoutes 函数，这个函数内容为空，我们将需要权限才能展示的路由放在动态路由函数内，此时页面不再是空数组
在这里插入图片描述

然后继续执行if条件句

const hasPermission = (roles: string[], route: RouteRecordRaw) => {//用于检查用户是否有权限访问某个路由const routeRoles = route.meta?.roles//从路由对象的 meta 属性中提取 roles 字段return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true//根据 routeRoles 和 roles 判断用户是否有权限访问该路由
}

最后前端路由按要求role为admin可显示，为editor不可显示

vue3的路由配置

先找到Layout布局文件，从中找到左侧边栏，找到下述代码 <SidebarItem v-for"route in noHiddenRoutes" :key"route.path" :item"route" :base-path"route.path" />/** *菜单项 <SidebarItem>: *使用…...

编程日记 2025/5/13 22:47:01

基于AnolisOS 8.6安装GmSSL 3.1.1及easy_gmssl库测试国密算法

测试环境 Virtual Box，AnolisOS-8.6-x86_64-minimal.iso，4 vCPU, 8G RAM, 60 vDisk。最小化安装。需联网。系统环境关闭防火墙 systemctl stop firewalld systemctl disable firewalld systemctl status firewalld selinux关闭 cat /etc/selinux/co…...

编程日记 2025/4/29 5:48:50

Linux系统：Ubuntu替换镜像源具体方法；

在Linux系统更新下载软件时，如遇因镜像源问题下载失败时，我们就需要替换系统原有镜像源，那么，此时，你是否还在百度四处搜索可以用的镜像源地址，然后反复去测试源地址的正确性呢，下面介绍一个亲测…...

编程日记 2025/5/9 17:45:08

机器人介绍

以下是关于机器人的介绍： 定义机器人是一种能够自动执行任务的机器系统，它集成了机电、机构学、材料学及仿生学等多个学科技术，可以接受人类指挥，运行预先编排的程序，或根据人工智能技术制定的原则纲领行动&#xf…...

编程日记 2025/5/12 2:41:02

thinkphp6+swoole使用rabbitMq队列

安装think-swoole安装 composer require php-amqplib/php-amqplib,以支持rabbitMq使用安装rabbitMq延迟队列插件安装 rabbitmq_delayed_message_exchange 插件，按照以下步骤操作： 下载插件：https://github.com/rabbitmq/rabbitmq-delayed-…...

编程日记 2025/5/7 5:39:10

19.Word：小马-校园科技文化节❗【36】

目录题目 NO1.2.3 NO4.5.6 NO7.8.9 NO10.11.12索引题目 NO1.2.3 布局→纸张大小→页边距：上下左右插入→封面：镶边→将文档开头的“黑客技术”文本移入到封面的“标题”控件中，删除其他控件 NO4.5.6 标题→原文原文→标题正文→手…...

编程日记 2025/5/10 4:02:23

Pandas进行MongoDB数据库CRUD

在数据处理的领域，MongoDB作为一款NoSQL数据库，以其灵活的文档存储结构和高扩展性广泛应用于大规模数据处理场景。Pandas作为Python的核心数据处理库，能够高效处理结构化数据。在MongoDB中，数据以JSON格式存储，这与Pandas的DataFrame结构可以很方便地互相转换。通过这篇教…...

编程日记 2025/5/12 17:53:25

分布式系统相关面试题收集

目录什么是分布式系统，以及它有哪些主要特性？ 分布式系统中如何保证数据的一致性？ 解释一下CAP理论，并说明在分布式系统中如何权衡CAP三者？ 什么是分布式事务，以及它的实现方式有哪些？ 什么是…...

编程日记 2025/5/11 20:55:48

家居EDI：Hom Furniture EDI需求分析

HOM Furniture 是一家成立于1977年的美国家具零售商，总部位于明尼苏达州。公司致力于提供高品质、时尚的家具和家居用品，满足各种家庭和办公需求。HOM Furniture 以广泛的产品线和优质的客户服务在市场上赢得了良好的口碑。公司经营的产品包括卧室、客厅…...

编程日记 2025/5/12 21:21:22

原码、反码、补码以及lowbit运算

原码、反码、补码以及lowbit运算原码： 可以用来计算正数加减，正数的原码、反码、补码都一样。第一位为符号位，符号位0为正数，1为负数(32位字符，这里用4位来举例子，后面皆是用4位来举例子，其…...

编程日记 2025/5/9 4:02:35

iOS 集成ffmpeg

前言本来打算用flutter去实现一个ffmpeg的项目的，不过仔细分析了一下，我后期需要集成OpenGL ES做视频渲染处理，OpenGL ES的使用目前在flutter上面还不是很成熟，所以最后还是选择用原生来开发 ffmpeg集成到iOS工程 iOS对于ffmp…...

编程日记 2025/5/12 3:03:56

DeepSeek的崛起与全球科技市场的震荡

引言近年来，人工智能（AI）技术的快速发展不断重塑全球科技格局。近日，中国初创企业DeepSeek推出了一款据称成本极低且性能强大的AI模型，引发全球市场的剧烈反应。NVIDIA、台积电等半导体和AI科技巨头股价大幅下跌&am…...

编程日记 2025/5/9 17:41:42

selenium定位网页元素

1、概述在使用 Selenium 进行自动化测试时，定位网页元素是核心功能之一。Selenium 提供了多种定位方法，每种方法都有其适用场景和特点。以下是通过 id、linkText、partialLinkText、name、tagName、xpath、className 和 cssSelector 定位元素的…...

编程日记 2025/5/6 17:36:38

Elasticsearch有哪些应用场景？

Elasticsearch的应用场景非常广泛，以下是一些主要的应用场景： 1.全文搜索： Elasticsearch凭借其强大、可扩展和快速的搜索功能，在全文搜索场景中表现出色。它允许用户以近乎实时的响应执行复杂的查询，常用于大型网站…...

编程日记 2025/5/12 16:49:03

MySQL 基础学习(1)：数据类型与操作数据库和数据表

MySQL 基础学习：数据类型与操作数据库和数据表在这篇博客中，我们将深入学习 MySQL 的基础操作，重点关注数据库和数据表的操作，以及 MySQL 中常见的数据类型。希望本文能帮助你更好地理解和掌握 MySQL 的基本用法。一、操作数据…...

编程日记 2025/5/13 22:34:56

芯片AI深度实战：基础篇之Ollama

有这么多大模型，怎么本地用？ Ollama可以解决这一问题。不依赖GPU，也不需要编程。就可以在CPU上运行自己的大模型。软件甚至不用安装，直接在ollama官网下载可执行文件即可。现在最流行的deepseek-r1也可以使用。当然还有我认为最…...

编程日记 2025/5/9 17:47:25

安卓(android)订餐菜单【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的（如果代码有错漏，可查看源码） 1.掌握Activity生命周的每个方法。 2.掌握Activity的创建、配置、启动和关闭。 3.掌握Intent和IntentFilter的使用。 4.掌握Activity之间的跳转方式、任务栈和四种启动模式。 5.掌握在Activity中添加…...

编程日记 2025/5/12 12:26:07

deb安装失败后，无法再安装别的包的解决方案

把package_name换成出安装问题的包移除该包的安装标记 sudo dpkg --remove --force-remove-reinstreq package_name清理残留文件和配置 sudo apt-get purge package_name...

编程日记 2025/5/13 12:45:57

算法基础学习——二分查找（附带Java模板）

有单调性的数列一定可以使用二分，没有单调性的题目也可能可以使用二分； （一）整数二分二分的本质： 在某个整数区间内，存在某种性质使得区间内左半边的数都不满足该性质；而右半边的数都满足该性…...

编程日记 2025/5/9 7:04:19

蓝桥杯例题五

无论你面对多大的困难和挑战，都要保持坚定的信念和积极的态度。相信自己的能力和潜力，努力不懈地追求自己的目标和梦想。不要害怕失败，因为失败是成功的垫脚石。相信自己的选择和决策，不要被他人的意见和批评左右。坚持不懈地努力…...

编程日记 2025/5/4 22:51:16

pyside6-uic form.ui -o ui_form.py 的作用

pyside6-uic form.ui -o ui_form.py 的作用 pyside6-uic form.ui -o ui_form.py 这个命令是用来将 .ui 文件转换为 Python 代码文件的工具。具体作用： pyside6-uic：这是一个命令行工具，用于将用 Qt Designer 或其他图形界面工具创建的 .ui …...

编程日记 2025/5/9 10:56:34

理解神经网络：Brain.js 背后的核心思想

温馨提示这篇文章篇幅较长，主要是为后续内容做铺垫和说明。如果你觉得文字太多，可以：先收藏，等后面文章遇到不懂的地方再回来查阅。直接跳读，重点关注加粗或高亮的部分。放心，这种“文字轰炸”不会常有的，哈哈~ 感谢你的耐心阅读！😊 欢迎来到 brain.js 的学习之旅！…...

编程日记 2025/5/12 9:34:18

工业相机开发操作流程

建议按照如下的流程操作相机(其中有一些步骤是可选的，已经标明)： 一、载入SDK的动态链接库档MVCAMSDK.DLL。可以使用动态或者静态加载两种方式。如果使用C/C进行开发，在工程引用 CameraApi.h头文件(位于安装目录的SDK/DEMO/VC/include中)和…...

编程日记 2025/5/10 0:34:36

利用飞书机器人进行 - ArXiv自动化检索推荐

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人根据飞书官方机器人使用手册，新建自定义机器人，并记录好webhook地址，后续将在配置文件中更新该地址。可以先完成到后续步骤之前，后续的步骤与安全相关&…...

编程日记 2025/5/13 17:13:10

SpringCloudGateWay和Sentinel结合做黑白名单来源控制

假设我们的分布式项目，admin是8087，gateway是8088，consumer是8086 我们一般的思路是我们的请求必须经过我们的网关8088然后网关转发到我们的分布式项目，那我要是没有处理我们绕过网关直接访问项目8087和8086不也是可以&#xff1…...

编程日记 2025/5/13 17:19:20

Win10安装MySQL、Pycharm连接MySQL，Pycharm中运行Django

一、Windows系统mysql相关操作 1、检查系统是否安装mysql 按住win r （调出运行窗口） 输入service.msc，点击【确定】 image.png 打开服务列表-检查是否有mysql服务 （compmgmt.msc） image.png 2、 Windows安装MySQL …...

编程日记 2025/5/13 5:24:52

MR-GDINO: Efficient Open-World Continual Object Detection—— 高效开放世界持续目标检测

这篇文章提出了一种名为MR-GDINO的开放世界持续目标检测方法，旨在解决开放世界检测器在持续学习过程中对已见类别和未见类别的灾难性遗忘问题。文章的主要内容和贡献如下： 问题定义：提出了开放世界持续目标检测任务，要求检测器在持…...

编程日记 2025/5/9 3:36:11

显示当前绑定变量

来自v$sql中的信息测试两个变量的情况（实际可以看6个，可根据需要修改） DROP TABLE T1 PURGE; CREATE TABLE T1 AS SELECT A.*,SYSDATE RIQI FROM DBA_USERS A ORDER BY 1;var mc char(3); var id number; exec :mc:SYS; exec :id:50;set li…...

编程日记 2025/4/29 11:56:35

如何将xps文件转换为txt文件？xps转为pdf，pdf转为txt，提取pdf表格并转为txt

文章目录 xps转txt方法一方法二 pdf转txt整页转txt提取pdf表格，并转为txt 总结另外参考XPS文件转换为TXT文件XPS文件转换为PDF文件PDF文件转换为TXT文件提取PDF表格并转为TXT示例代码（部分） 本文测试代码已上传，路径如下&#xff…...

编程日记 2025/5/11 11:04:26

STM32 PWM驱动舵机

接线图： 这里将信号线连接到了开发板的PA1上代码配置： 这里的PWM配置与呼吸灯一样，呼吸灯连接的是PA0引脚，输出比较单元用的是OC1通道，这里只需改为OC2通道即可。完整代码： #include "servo.h&quo…...

编程日记 2025/5/11 10:08:38

「AI学习笔记」深度学习的起源与发展：从神经网络到大数据（二）

深度学习（DL）是现代人工智能（AI）的核心之一，但它并不是一夜之间出现的技术。从最初的理论提出到如今的广泛应用，深度学习经历了几乎一个世纪的不断探索与发展。今天，我们一起回顾深度学习的历史…...

编程日记 2025/5/13 6:23:41

专业视角深度解析：DeepSeek的核心优势何在？

杭州深度求索（DeepSeek）人工智能基础技术研究有限公司，是一家成立于2023年7月的中国人工智能初创企业，总部位于浙江省杭州市。该公司由量化对冲基金幻方量化（High-Flyer）的联合创始人梁文锋创立&#xff0c…...

编程日记 2025/5/11 23:40:32

科技巨头AI投资引领未来增长

标题：科技巨头AI投资引领未来增长文章信息摘要： 2024年科技巨头的资本支出远超预期，达到2360亿美元，主要得益于AI基础设施和数据中心建设的加速。预计2025年这一趋势将继续保持强劲增长，资本支出可能突破3000亿美元。…...

编程日记 2025/5/12 0:56:21

【Unity3D】Tilemap俯视角像素游戏案例

目录一、导入Tilemap 二、导入像素风素材三、使用Tilemap制作地图 3.1 制作Tile Palette素材库 3.2 制作地图四、实现A*寻路五、待完善一、导入Tilemap Unity 2019.4.0f1 已内置Tilemap 需导入2D Sprite、2D Tilemap Editor、以及一个我没法正常搜出的2D Tilemap…...

编程日记 2025/5/12 14:49:03

Java 知识速记：全面解析 final 关键字

Java 知识速记：全面解析 final 关键字什么是 final 关键字？ final 关键字是 Java 中的一个修饰符。它可以用于类、方法和变量，其作用是限制对这些元素的修改。究竟如何限制？我们来逐个分析。 final 在变量中的用法 1. 声明常…...

编程日记 2025/5/13 7:57:01

《智能家居“孤岛危机”：设备孤立如何拖垮系统优化后腿》

在科技飞速发展的今天，智能家居不再是遥不可及的概念，它正逐渐走进千家万户，为我们描绘出舒适便捷的未来生活蓝图。想象一下，下班回家前，你可以通过手机远程开启空调，让室内温度恰到好处；到家时…...

编程日记 2025/5/12 10:33:36

大数据学习之Kafka消息队列、Spark分布式计算框架一

Kafka消息队列章节一.kafka入门 4.kafka入门_消息队列两种模式 5.kafka入门_架构相关名词 Kafka 入门 _ 架构相关名词事件记录了世界或您的业务中 “ 发生了某事 ” 的事实。在文档中也称为记录或消息。当您向 Kafka 读取或写入数据时，您以事件的形式执行…...

编程日记 2025/5/11 8:38:12

Linux《基础指令》

在之前的Linux《Linux简介与环境的搭建》当中我们已经初步了解了Linux的由来和如何搭建Linux环境，那么接下来在本篇当中我们就要来学习Linux的基础指令。在此我们的学习是包括两个部分，即指令和关于Linux的基础知识；因此本篇指令和基础知识的…...

编程日记 2025/5/12 4:06:00

Avalonia+ReactiveUI跨平台路由：打造丝滑UI交互的奇幻冒险

一、引言在当今数字化时代，跨平台应用开发已成为大势所趋。开发者们迫切需要一种高效、灵活的方式，能够让应用程序在不同操作系统上无缝运行，为用户提供一致的体验。Avalonia 和 ReactiveUI 的组合，宛如一对天作之合的舞者&…...

编程日记 2025/5/13 14:10:57

Ansible自动化运维实战--通过role远程部署nginx并配置（8/8）

文章目录 1、准备工作2、创建角色结构3、编写任务4、准备配置文件（金甲模板）5、编写变量6、编写处理程序7、编写剧本8、执行剧本Playbook9、验证-游览器访问每台主机的nginx页面在 Ansible 中，使用角色（Role）来远程部…...

编程日记 2025/5/12 12:26:10

H264原始码流格式分析

1.H264码流结构组成 H.264裸码流（Raw Bitstream）数据主要由一系列的NALU（网络抽象层单元）组成。每个NALU包含一个NAL头和一个RBSP（原始字节序列载荷）。 1.1 H.264码流层次 H.264码流的结构可以分为两个层…...

编程日记 2025/5/8 17:02:56

批量解密，再也没有任何限制了

有的时候我们在网上下载了PDF文档。发现没有办法进行任何的操作，就连打印权限都没有。今天给大家介绍的这个软件可以一键帮你进行PDF解密，非常方便，完全免费。 PDF智能助手批量解密PDF文件这个软件不是很大，只有10MB&#xff…...

编程日记 2025/5/13 17:59:10

认识小程序的基本组成结构

1.基本组成结构 2.页面的组成部分 3.json配置文件 4.app.json文件(全局配置文件） 5.project.config.json文件 6.sitemap.json文件 7.页面的.json配置文件通过window节点可以控制小程序的外观...

编程日记 2025/5/10 4:54:22

模型I/O

文章目录什么是模型I/O模型I/O功能之输出解析器输出解析器的功能输出解析器的使用Pydantic JSON输出解析器结构化输出解析器什么是模型I/O 模型I/O在所有LLM应用中，核心元素无疑都是模型本身。与模型进行有效的交互是实现高效、灵活和可扩展应用的关键。LangChain…...

编程日记 2025/5/13 2:37:16

DeepSeek模型：开启人工智能的新篇章

DeepSeek模型：开启人工智能的新篇章在当今快速发展的技术浪潮中，人工智能（AI）已经成为了推动社会进步和创新的核心力量之一。而DeepSeek模型，作为AI领域的一颗璀璨明珠，正以其强大的功能和灵活的用法&…...

编程日记 2025/5/13 22:36:06

git push到远程仓库时无法推送大文件

一、错误 remote: Error: Deny by project hooks setting ‘default’: size of the file ‘scientific_calculator’, is 164 MiB, which has exceeded the limited size (100 MiB) in commit ‘4c91b7e3a04b8034892414d649860bf12416b614’. 二、原因本地提交过大文件&am…...

编程日记 2025/5/13 13:30:37

初识ExecutorService

设计目的 ExecutorService是Java并发包(java.util.concurrent)的一部分，旨在提供一种更高层次的抽象来管理线程和任务执行。它解决了手动创建和管理线程带来的复杂性和资源浪费问题，通过复用固定数量的线程池来处理大量短生命周期的任务，从而…...

编程日记 2025/5/10 12:28:01

初二回娘家

昨天下午在相亲相爱一家人群里聊天，今天来娘家拜年。聊天结束后，开始准备今天的菜肴，梳理了一下，凉菜，热菜，碗菜。上次做菜，粉丝感觉泡的不透，有的硬，这次使用开水浸泡…...

编程日记 2025/5/8 17:25:19

js基础（黑马程序员）

Web APIs（day6） 一、正则表达式 1.介绍正则表达式（Regular Expression）：是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象通常用来查找、替换那些符合正则表达式的文本&#x…...

编程日记 2025/5/12 14:38:56

Java---猜数字游戏

本篇文章所实现的是Java经典的猜数字游戏 , 运用简单代码来实现基本功能目录一.题目要求二.游戏准备三.代码实现一.题目要求随机生成一个1-100之间的整数(可以自己设置区间），提示用户猜测，猜大提示"猜大了"，…...

编程日记 2025/5/12 0:00:08

相关文章：