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

vue3 vite 动态加载路由遇到的问题

news 来源：原创 2025/5/14 13:18:21

记录一下动态加载路由遇到的问题

正常使用import引入静态路由是没问题的

component: () => import('@/components/ExampleComponent.vue')

动态引入的时候写成import就不行了
由于后端给的路由格式比较反人类…我这边先递归把获取到的数据格式做了一个整合.

const processedData = res.data.map((item) => {// 递归函数来处理子路由const processChildren = (children) =>(children || []).map((childItem) => ({path: childItem.path,name: childItem.name,component: childItem.permsLevel == 1 ? 'Layout' : childItem.path, // 如果菜单是一级meta: {id: childItem.id,icon: childItem.icon || undefined,title: childItem.title,},// 递归处理更深层次的子路由...(childItem.menuTwoList || childItem.menuThreeList? {children: processChildren(childItem.menuTwoList || childItem.menuThreeList),}: {}),}))// 创建一个新对象以避免直接修改原始数据const route = {path: item.path,name: item.name,component: item.permsLevel == 1 ? 'Layout' : item.path,meta: {id: item.id,icon: item.icon || undefined,title: item.title,},// 递归处理子路由...(item.menuTwoList || item.menuThreeList? {children: processChildren(item.menuTwoList || item.menuThreeList),}: {}),}// 这里要注意的就是如果子路由没有children一定要删除,不然点击显示不出来Layoutif (route.children.length == 0) {delete route.children}return route
})
// 我这边是因为后端给的children可能叫menuTwoList 或者menuThreeList才进行这样的处理
// 如果大家只是都叫children就不需要这样了

现在我们拿到的数据就是正常的路由格式了,但是还差一步动态引入路由

在permission.ts里面找到router.beforeEach,就是咱们的路由守卫了

if (to.path === '/login') {// 如果已登录，请重定向到主页next({ path: '/' })
} else {try {const PermissionStore = usePermissionStore()// 路由添加进去了没有及时更新 需要重新进去一次拦截if (!PermissionStore.routes.length) {// 获取权限列表进行接口访问 因为这里页面要切换权限const accessRoutes = await PermissionStore.generateRoutes(UserStore.roles)hasRoles = false// 在这里进行动态路由的添加await processRoutes(accessRoutes)next({ ...to, replace: true }) // // 这里相当于push到一个页面 不在进入路由拦截} else {next() // // 如果不传参数就会重新执行路由拦截，重新进到这里}} catch (error) {next(`/login?redirect=${to.path}`)}
}

processRoutes和resolveComponent的方法我就贴在这边大家参考一下

const modules = import.meta.glob('/src/views/**/*.vue')
const layout = import.meta.glob('/src/layout/**/*.vue')
// 记录路由
const resolveComponent = (path: string, type: any) => {// 拿到views下面的所有文件之后，动态拼接`key`去获取valueconst importPage = type ? modules[`/src/views${path}.vue`] : layout[`/src/${path}.vue`]// console.log(importPage)if (!importPage) {throw new Error(`Unknown page ${path}. Is it located under Pages with a .vue extension?`)}return importPage
}
const processRoutes = async (routes) => {routes.forEach((item) => {// 检查当前路由项是否需要替换组件if (item.component === 'Layout') {item.component = resolveComponent('layout/index', null)} else {item.component = resolveComponent(item.path, 1)}// 添加当前路由到路由器// 如果当前路由项有子路由，则递归处理if (item.children && Array.isArray(item.children)) {processRoutes(item.children)}router.addRoute(item)})
}

完结
觉得写的比较全面的请给一个小星星.谢谢~

vue3 vite 动态加载路由遇到的问题

记录一下动态加载路由遇到的问题正常使用import引入静态路由是没问题的 component: () > import(/components/ExampleComponent.vue)动态引入的时候写成import就不行了由于后端给的路由格式比较反人类…我这边先递归把获取到的数据格式做了一个整合. const processedDa…...

编程日记 2025/5/14 13:18:21

仿生的群体智能算法总结之一（十种）

群体智能算法是一类通过模拟自然界中的群体行为来解决复杂优化问题的方法。以下是10种常见的群体智能算法：编号算法名称（英文）算法名称（中文）年份作者 1 Ant Colony Optimization (ACO) 蚁群优化算法 1991 Marco Dorigo 2 Particle Swarm Optimization (PSO) 粒子群优…...

编程日记 2025/5/15 10:53:30

02pandas读取和保存数据的方法

pandas读取和保存数据的方法一、pandas支持的数据格式二、pandas常用数据读取方法1. 准备工作2. 代码示例1.pandas数据读取常用的方法2. read_excel 方法（1）read_excel()方法：读取excel文件（2）head()方法：…...

编程日记 2025/5/15 10:36:02

【STM32项目】智能物联网驱动的生物样本培育与管理辅助系统（完整工程资料源码）

视频功能演示：智能物联网驱动的生物样本培育与管理辅助系统目录：目录视频功能演示：目录：...

编程日记 2025/5/13 0:44:28

家教老师预约平台小程序系统开发方案

家教老师预约平台小程序系统将连接学生/家长与家教老师，提供一站式的家教服务预约体验。一、用户需求分析1、家教老师：希望获得更多的学生资源，通过平台展示自己的教学特长和经验，管理个人日程，接收并确认预约请求&a…...

编程日记 2025/5/8 9:22:46

uniapp 自定义类微信支付键盘（微信小程序)

效果图代码: <view class"popups popupsB"><view class"appreciatePrice"><view class"appreciatePriceTitle">赞赏金额</view><view class"appreciatePriceInput flex ac">￥<input typ…...

编程日记 2025/5/12 17:16:14

第十一章图论

/* * 题目名称：连通图 * 题目来源：吉林大学复试上机题 * 题目链接：http://t.cn/AiO77VoA * 代码作者：杨泽邦(炉灰) */#include <iostream> #include <cstdio>using namespace std;const int MAXN 1000 10;int fathe…...

编程日记 2025/5/10 4:36:27

算法学习（21）—— BFS解决FloodFill问题

关于FloodFill 关于FloodFill算法，我们之前在dfs章节已经介绍过了：算法学习（17）—— FloodFill算法-CSDN博客下面是用bfs宽搜来解决的实例部分OJ题详解 733. 图像渲染 733. 图像渲染 - 力扣（LeetCode&#xf…...

编程日记 2025/5/1 5:21:44

计算机网络基础(7)中科大郑铨老师笔记

应用层目标：  网络应用的原理：网络应用协议的概念和实现方面 传输层的服务模型 客户-服务器模式 对等模式(peerto-peer) 内容分发网络  网络应用的实例：互联网流行的应用层协议  HTTP  FTP  SMTP / POP3 / IMAP  DNS…...

编程日记 2025/5/13 17:33:18

CSS 之响应式设计前世今生

CSS系列文章目录 CSS 之 display 布局属性详解 CSS 之 position 定位属性详解一文搞懂flex布局【弹性盒布局】文章目录 CSS系列文章目录一、前言二、历史上的网站布局三、响应式设计之前的灵活布局四、响应式设计五、媒介查询六、灵活网格七、现代布局技术7.1 多栏布局7.2 伸…...

编程日记 2025/5/11 22:20:41

前端，npm install安装依赖卡在sill idealTree buildDeps（设置淘宝依赖）

输入npm i后，一直卡在sill idealTree buildDeps，一动不动 cnpm可以安装成功，但使用cnpm不会生成package-lock.json文件设置淘宝依赖，依然卡住，挂梯子也不行解决方法： // 取消ssl验证 set strict-ssl …...

编程日记 2025/5/3 11:31:28

【Rust自学】9.2. Result枚举与可恢复的错误 Pt.1：match、expect和unwrap处理错误

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 9.2.1. Result枚举通常情况下，错误都没有严重到需要停止整个程序的地步。某个函数之所以运行失败或者是遇到错误通常是由一些…...

编程日记 2025/5/1 14:24:55

[241231] CachyOS 2024 年终总结：性能飞跃与社区繁荣 | ScyllaDB 宣布转向开源可用许可证

目录 CachyOS 2024 年终总结：性能飞跃与社区繁荣ScyllaDB 宣布转向开源可用许可证 CachyOS 2024 年终总结：性能飞跃与社区繁荣 CachyOS 2024 年的最后一个版本 (也是第 13 个版本) 已经发布，同时也迎来了辞旧迎新之际。让我们一起回顾 Cachy…...

编程日记 2025/5/13 22:19:40

9.系统学习-卷积神经网络

9.系统学习-卷积神经网络简介输入层卷积层感受野池化层全连接层代码实现简介卷积神经网络是一种用来处理局部和整体相关性的计算网络结构，被应用在图像识别、自然语言处理甚至是语音识别领域，因为图像数据具有显著的局部与整体关系，其在图…...

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

java并发之AQS

一、简介 AQS，全称：AbstractQueuedSynchronizer，是一个JDK提供的用于构建锁、同步器等线程协作工具类的框架，内部维护FIFO双向队列（双向链表实现）。 AQS重要属性： // 表示同步状态。它既可以表…...

编程日记 2025/5/15 2:55:57

Synthesia技术浅析（一）

Synthesia 是一款利用人工智能技术生成视频内容的产品，其中变分自编码器（Variational Autoencoder, VAE）技术在视频生成过程中起到了关键作用。 1. 变分自编码器（VAE）概述变分自编码器（VAE）是…...

编程日记 2025/5/3 11:24:09

SQL偏移类窗口函数—— LAG（）、LEAD（）用法详解

SQL偏移类窗口函数：LAG() 和 LEAD() 用法详解在 SQL 中，偏移类窗口函数 LAG() 和 LEAD() 用于访问当前行的前几行或后几行的值。 1. LAG() 函数 LAG() 函数返回当前行的前几行的数据。 LAG(Expression, OffSetValue, DefaultVar) OVER (PARTITION BY …...

编程日记 2025/5/11 8:04:34

PHP语言的计算机基础

计算机基础与PHP语言入门在当今信息技术高速发展的时代，计算机已经成为我们日常生活中不可或缺的重要工具。学习计算机基础知识，不仅能增强我们对信息技术的理解，还会为我们后续学习编程语言打下良好的基础。本文将以PHP语言为切入点&#…...

编程日记 2025/5/13 2:56:29

39. 解压报文

题目描述为了提升数据传输的效率，会对传输的报文进行压缩处理输入一个压缩后的报文，请返回它解压后的原始报文.压缩规则:n[str]，表示方括号内部的str正好重复n次。注意n为正整数(0<n<100)，str只包含小写英文字母&#xff0…...

编程日记 2025/5/12 4:51:43

SpringBoot日志快速集成详解-生产实战

SpringBoot日志快速集成详解 1. 添加依赖2. 创建 logback-spring.xml 配置文件示例 logback-spring.xml 配置： 3. 启用 Spring Boot 自动配置4. 配置 Spring Boot 启动日志级别5. 运行与验证博文专注于最快速的实战，没有那么多逼逼叨叨的理论&#xff0…...

编程日记 2025/5/14 7:40:27

基于 Node.js 的 ORM（对象关系映射）工具——Sequelize介绍与使用，并举案例分析

便捷性介绍支持多种数据库，包括 PostgreSQL、MySQL、MariaDB、SQLite 和 Microsoft SQL Server。Sequelize 提供了丰富的功能，帮助开发者用 JavaScript（或 TypeScript）代码操作数据库，而无需直接书写 SQL 语句。 Se…...

编程日记 2025/5/13 5:55:58

电子应用设计方案85：智能 AI门前柜系统设计

智能 AI 门前柜系统设计一、引言智能 AI 门前柜系统旨在提供便捷、安全和智能的物品存储与管理解决方案，适用于家庭、公寓或办公场所的入口区域。二、系统概述 1. 系统目标 - 实现无接触式物品存取，减少交叉感染风险。 - 具备智能识别和分类功能&am…...

编程日记 2025/5/12 17:32:30

ts是什么、tsc是什么、tsx是什么、jsx是什么、scss是什么

一、TS (TypeScript): TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，增加了类型系统和对ES6及以后版本新特性的支持。TypeScript 旨在解决 JavaScript 开发中的可维护性、可扩展性和大型项目中的复杂性问题。它允许开发者在编…...

编程日记 2025/5/13 17:46:15

【虚拟机】VMware 16图文安装和配置 AlmaLinux OS 9.5 教程

准备工作下载AlmaLinux ISO文件：从AlmaLinux官方网站（https://almalinux.org/）下载最新版本的ISO文件。安装VMware Workstation：确保您的计算机上已安装VMware Workstation。（注：我这边使用的是VMware16…...

编程日记 2025/5/11 7:47:29

使用MySQL SLES存储库安装MYSQL

MySQL SLES存储库提供RPM包，用于在SUSE EnterpriseLinuxServer上安装和管理MySQL服务器、客户端和其他组件。添加MySQLSLES存储库为系统的存储库列表添加或更新官方MySQLSLES存储库： 配置文件名的开头部分，如mysql84，描述了为…...

编程日记 2025/5/9 15:04:58

30分钟学会HTML

HTML 基本语法 HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。在线体验一下 CodePen (在线 HTML 编辑器)。千万不…...

编程日记 2025/5/1 19:55:16

vue——滑块验证

1. 介绍 1.1 简介基于滑动式的验证码，免于字母验证码的繁琐输入用于网页注册或者登录 1.2 来源说明 vue使用滑块验证功能，是基于vue-monoplasty-slide-verify这样的一个开源项目，进行实现的，这是这个开源项目的网址传送阵&#…...

编程日记 2025/5/13 4:52:14

编程入门（2）-2024年 RAD Studio version 12发布综述

随着2024年即将画上句号，我想借此机会回顾一下我们在这一年中发布的一些Embarcadero产品、行业趋势，并感谢我们尊贵的客户们对我们的产品一如既往的支持。这一年对我们来说充满了激动人心的变化和发展，我们非常高兴能与您一起踏上这段旅程。 …...

编程日记 2025/5/13 17:46:16

2025年1月4日蜻蜓q旗舰版st完整开源·包含前后端所有源文件·开源可商用可二开·优雅草科技·优雅草kir|优雅草星星|优雅草银满|优雅草undefined

编程日记 2025/5/13 13:31:03

米哈游可切换角色背景动态壁纸

米哈游可切换角色背景动态壁纸 0. 视频 B站演示: 米哈游可切换角色背景动态壁纸-wallpaper 1. 基本信息作者: 啊是特嗷桃系列: 复刻系列 (衍生 wallpaper壁纸引擎用)网站: 网页版在线预览 (没有搞大小适配, 建议横屏看; 这个不能切角色, 只能在wallpaper中切)仓库: GitHub…...

编程日记 2025/5/10 8:33:15

框架Tensorflow2

深度学习框架之Tensorflow2 Tensorflow2版本的介绍 Tensorflow(简称tf)是深度学习框架，大大简化了建模的方法和步骤，把Keras Api当作核心，使用非常简单，跨平台，集成各种现成模型，eager mode使得调试起来不…...

编程日记 2025/5/13 1:35:39

急需升级，D-Link 路由器漏洞被僵尸网络广泛用于 DDoS 攻击

僵尸网络活动增加 ：新的“FICORA”和“CAPSAICIN”僵尸网络（Mirai 和 Kaiten 的变体）的活动激增。被利用的漏洞 ：攻击者利用已知的 D-Link 路由器漏洞（例如 CVE-2015-2051、CVE-2024-33112）来执行恶意命…...

编程日记 2025/5/7 7:16:05

银行大数据平台管理系统的设计与实现

标题:银行大数据平台管理系统的设计与实现内容:1.摘要摘要：本文介绍了银行大数据平台管理系统的设计与实现。该系统旨在解决银行数据管理中的数据量大、数据类型多、数据处理复杂等问题。通过采用大数据技术，如 Hadoop、Spark 等，实现了数…...

编程日记 2025/5/14 8:41:40

leetcode 732. 我的日程安排表 III

题目：732. 我的日程安排表 III - 力扣（LeetCode） 这个数据规模，暴力就够了 struct Book {int begin;int end;Book(int b, int e) {begin b;end e;} }; class MyCalendarThree { public:MyCalendarThree() {}int book(int star…...

编程日记 2025/5/10 3:58:47

公共数据授权运营系统建设手册（附下载）

在全球范围内，许多国家和地区已经开始探索公共数据授权运营的路径和模式。通过建立公共数据平台，推动数据的开放共享，促进数据的创新应用，不仅能够提高政府决策的科学性和公共服务的效率，还能够激发市场活力&#xff0…...

编程日记 2025/5/14 10:43:03

现代光学基础6

总结自老师的ppt yt6 半导体激光器开卷考试学习资料目录半导体激光器边发射半导体激光器垂直腔面发射激光器（VCSEL）激光产生条件（激光原理）半导体激光器的水容器模型有源半导体区域类型和载流子注入发光二极管（L…...

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

利用ChatGPT API构建智能应用的最佳实践

随着自然语言处理（NLP）技术的飞速发展，基于大型语言模型（LLM）的应用程序逐渐成为开发者的关注焦点。OpenAI 提供的 ChatGPT API 是当前流行的一项服务，开发者可以利用它来构建多种智能化应用，如…...

编程日记 2025/5/12 21:49:39

源代码编译安装X11及相关库、vim，配置vim（1）

一、目录结构如下。所有X11及相关库装到mybuild，源代码下载到src下，解压，进入，编译安装。编译时指定--prefix到相同的目录，即上图中mybuild。 ./configure --prefixpwd/../../mybuild [CFLAGS"-I/path/to/X11…...

编程日记 2025/5/14 5:53:28

题目一： n的阶乘 804. n的阶乘 - AcWing题库代码 import java.util.Scanner;public class Main {private static int fact(int n) {int res 1;for(int i 1; i < n; i ) res * i;return res;}public static void main(String[] args) {Scanner sc new Scann…...

编程日记 2025/5/10 14:16:40

文档 | Rstudio下的轻量级单页面markdown阅读器 markdownReader

需求：在写R数据分析项目的时候，代码及结果的关键变化怎么记录下来？最好git能很容易的跟踪版本变化。 markdown 是最理想的选择，本文给出一种Rstuidio下的轻量级md阅读器实现：markdownReader。书写md还是在Rstudio。更…...

编程日记 2025/5/3 23:56:43

termux配置nginx+php

只能以默认用户u0_axx运行,修改用户会报错An error occurred.或者file no found 安装nginx pkg install nginx安装php-fpm pkg install nginx修改nginx配置文件, nano ../usr/etc/nginx/nginx.conf#端口必须设置在1024以上(1024以下需要root,但php-fpm不能以root用户运行,n…...

编程日记 2025/5/15 6:29:28

【顶刊TPAMI 2025】多头编码（MHE）之极限分类 Part 3：算法实现

目录 1 三种多头编码（MHE）实现1.1 多头乘积（MHP）1.2 多头级联（MHC）1.3 多头采样（MHS）1.4 标签分解策略论文：Multi-Head Encoding for Extreme Label Classification 作者…...

编程日记 2025/5/10 7:29:48

Spring Boot自动装配代码详解

概述 Spring Boot自动装配是其核心特性之一，它能够根据项目中添加的依赖自动配置Spring应用程序。通过自动装配，开发人员可以减少大量的配置工作，快速搭建起一个可用的Spring应用。关键组件和注解 SpringBootApplication注解这是Spring Bo…...

编程日记 2025/5/12 14:42:28

H7-TOOL固件2.27发布，新增加40多款芯片脱机烧录，含多款车轨芯片，发布LUA API手册，CAN助手增加负载率，错误状态信息检测

H7-TOOL详细介绍（含操作手册）：H7-TOOL开发工具，1拖4/16脱机烧录，高速DAPLINK，RTOS Trace，CAN/串口助手, 示波器, RTT等，支持WiFi，以太网，高速USB和手持 - H7-…...

编程日记 2025/5/13 0:43:48

Socket套接字

Socket工作原理。服务器端通过bind绑定socket，一直监听端口。当客户端通过conncet方法连接指定计算机的端口，并使用send(）向socket中写入信息。生成套接字，主要有3个参数：通信的目的IP地址、使用的传输层协议(TCP或…...

编程日记 2025/5/10 11:34:41

《学校一卡通管理系统》数据库MySQL的设计与实现

引言：学校一卡通管理系统旨在为学校提供一个高效的数字化管理平台，集中管理学生和教职工的账户、充值、消费、查询等日常事务。通过该系统，学生可以便捷地进行充值、消费及查看余额，管理员则可以高效地管理用户账户、充值记录、消费记录等数据。系统采用MySQL数据库，通过视…...

编程日记 2025/5/14 23:29:31

windows C#-接口中的索引器

可以在接口上声明索引器。接口索引器的访问器与类索引器的访问器有所不同，差异如下： 接口访问器不使用修饰符。接口访问器通常没有正文。访问器的用途是指示索引器为读写、只读还是只写。可以为接口中定义的索引器提供实现，但这种情况非…...

编程日记 2025/5/15 1:46:12

element-plus大版本一样，但是小版本不一样导致页面出bug

npm 的版本 node的版本 npm的源这些都一样，但是效果不一样发现是element的包版本不一样导致的 2.9.1与2.8.1的源是不一样的，导致页面出bug;...

编程日记 2025/5/11 15:07:42

三甲医院等级评审八维数据分析应用（五）--数据集成与共享篇

一、引言 1.1 研究背景与意义随着医疗卫生体制改革的不断深化以及信息技术的飞速发展，三甲医院评审作为衡量医院综合实力与服务水平的重要标准，对数据集成与共享提出了更为严苛的要求。在传统医疗模式下，医院内部各业务系统往往各自为政，形成诸多“信息孤岛”，使得数据…...

编程日记 2025/5/10 20:17:45

记录一下动态加载路由遇到的问题

在permission.ts里面找到router.beforeEach,就是咱们的路由守卫了

相关文章：