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

用vite动态导入vue的路由配置

news 来源：原创 2025/5/24 12:28:30

在Vue应用中，通过路由可以实现不同页面之间的切换，同时也可以实现页面之间的传参和控制页面的显示与隐藏。但是我们在开发的过程中，会发现在路由配置中的路由配置和我们的项目结构高度重复，在我们修改页面文件结构时非常的麻烦与复杂，这时候，如果可以动态的导入路由，就可以大大提示我们项目的可维护性。

我们在开发中会经常听见一句话，约定大于配置，路由的动态导入也是这句话应用的一种，我们这里动态导入路由模仿了在uniapp进行小程序开发的页面配置文件，要求有以下几点：

所有的页面都必须配置到/src/pages文件夹下；
所有的页面文件层级必须是/src/pages/页面文件夹名称/；
所有的页面文件中必须有page.ts作为配置文件和index.vue作为页面入口文件；

结构展示如下：

page.ts文件展示：

//home的page.ts
export default {title: '首页',menuOrder: 1,childrens: [`../pages/homechildren`]
}

//homechildren的page.ts
export default {title: '首页的子组件',menuOrder: 1,isChild: true,
}

//login的page.ts
export default {title: '登录',menuOrder: 2
}

此时我们要通过vite的函数import.meta.glob()和import()扫描pages文件夹动态生成路由，代码如下：

//路由配置文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const pages = import.meta.glob('../pages/**/page.ts', {eager: true,import: 'default'
})const components = import.meta.glob('../pages/**/index.vue')const getChildRoutes = async (childrens: string[]) => {const res = [];for (const item of childrens) {const pageModule = await import(`${item}/page.ts`);const componentModule = await import(`${item}/index.vue`);const routePath = item.replace('../pages/', '').replace('/page.ts', '') || '/';const name = routePath.split('/').filter(Boolean).join('-') || 'index';res.push({path: routePath,name,component: componentModule.default,meta: pageModule.default});}return res;
};const routes = Object.entries(pages).filter(([path, meta]: [string, any]) => !meta.isChild).map(([path, meta]: [string, any]) => {const compPath = path.replace('page.ts', 'index.vue')path = path.replace('../pages', '').replace('/page.ts', '') || '/';const name = path.split('/').filter(Boolean).join('-') || 'index';return {path,name,component: components[compPath],meta: meta,children: !!meta.childrens ? getChildRoutes(meta.childrens) : []} as RouteRecordRaw
})const router = createRouter({history: createWebHistory(),routes: routes,
})//路由重定向
router.beforeEach((to, from, next) => {if (to.path === '/') {next('/home')} else if (!routes.some(route => route.path === to.path)) {next('/home')} else {next()}})export {router
}

效果展示：

路由对象展示：

用vite动态导入vue的路由配置

在Vue应用中，通过路由可以实现不同页面之间的切换，同时也可以实现页面之间的传参和控制页面的显示与隐藏。但是我们在开发的过程中，会发现在路由配置中的路由配置和我们的项目结构高度重复，在我们修改页面文件结构时非常的麻烦与复…...

编程日记 2025/5/24 12:28:30

sources.list.d目录

sources.list可能大家很熟悉，是配置镜像链接的地方。 sources.list.d其实就是一个目录，在linux系统中.d后缀一般定义为一个目录，且很喜欢用这种方式。这种方式有一个好处，就是修改不会影响到sources.list文件， 在这里…...

编程日记 2025/5/24 11:06:39

【C语言】文件操作

目录一为什么使用文件二什么是文件程序文件数据文件文件名二进制文件和文本文件？ 三文件的打开与关闭流的概念标准流文件指针指针的声明指针的初始化四文件的打开与关闭打开 fopen()函数五总结： 前言： …...

编程日记 2025/4/29 10:40:16

静态库与动态库简介

静态库与动态库简介基本概念静态库静态库是在编译链接阶段被直接整合到可执行文件中的代码集合。链接器会从静态库中提取程序所需的所有对象，并将它们复制到最终的可执行文件中。特点： 可执行文件包含了所有代码，运行时无需外部依赖…...

编程日记 2025/4/29 10:38:09

02《小地图实时》Unity

创建一个新的项目创建一个球体作为主角重命名为Player 在主角上创建空的子物体重命名为MiniMapIcon 增加一个精灵图片并设置为绿色增加一个层（目的是在小地图中看的到而在场景中看不到这个绿色Icon） 命名为MiniMap 在主摄像机中设置剔除遮罩Culli…...

编程日记 2025/4/29 10:37:01

【Redis】基础4：作为分布式锁

文章目录 1. 一些概念2. MySQL方案2.1 方案一：事务特性2.1.1 存在的问题2.1.2 解决方案 2.2 方案二：乐观锁2.3 方案三：悲观锁 3. Redis3.1 实现原理3.2 实现细节3.2.1 问题1：持有期间锁过期问题3.2.2 问题2：判断和释放…...

编程日记 2025/5/24 12:18:26

迭代器与生成器

目录 Iterator 的作用 Iterator 的遍历过程 Symbol.iterator方法实现iterator接口的自定义类示例 Generator函数迭代器对象的next方法的运行逻辑迭代器对象除了具有next方法，还可以具有return方法。 Iterator 的作用为各种数据结构，提供一个统…...

编程日记 2025/5/24 12:11:39

Python 实现的运筹优化系统数学建模详解(动态规划模型）

相关代码链接：https://download.csdn.net/download/heikediguoshinib/90713747?spm1001.2014.3001.5503 一、引言在计算机科学与数学建模的广阔领域中，算法如同精密的齿轮，推动着问题的解决与系统的运行。当面对复杂的优化问题时&…...

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

miniconda在ARM64位芯片上面的安装

文章目录前言一、特点二、适用场景三、下载安装及使用1.下载脚本文件2.安装命令3.常见用法总结前言 Miniconda 是一个轻量级的 Python 发行版，它是 Anaconda 的一个简化版本。Anaconda 是一个广泛使用的数据科学平台，包含了众多的 Python 包和工具&a…...

编程日记 2025/5/6 1:58:01

vue跨域问题总结笔记

目录一、Websocket跨域问题 1.nginx配置 2.VUE CLI代理 3.env.development配置 4.nginx日志 5.解决一、解决跨域的几种常用方法 1.Vue CLI代理 2.JSONP 3.WebSocket 4.NGINX解决跨域问题 6.Java解决跨域二、Vue跨域问题详解 1. 什么是跨域 2. 跨域的例子 3.…...

编程日记 2025/5/20 12:21:43

自动驾驶领域专业词汇（专业术语）整理

以下是分类整理的自动驾驶领域专业词汇表，涵盖 AI、芯片、传感器、自动驾驶核心、辅助驾驶、安全、通信、车灯、泊车、测试标准等类别： AI相关缩写英文全称中文解释AIArtificial Intelligence人工智能，模拟人类智能的技术体系NNNeural Ne…...

编程日记 2025/5/22 20:28:12

说一下react更新的流程

beginWork 使用v-dom和current fiber去生成子节点的workInProgress Fiber 期间会执行函数组件、类组件、diff子节点给我需要变更的节点，打赏effectTag 增placement 2 0010 删deletion 8 1000 改 update 4 0100 增和改 placementAndUpdate…...

编程日记 2025/5/15 12:31:29

C 语言函数指针与指针函数详解

一、引言在 C 语言的编程世界中，函数指针和指针函数是两个既强大又容易混淆的概念。它们为 C 语言带来了更高的灵活性和可扩展性，广泛应用于回调函数、动态链接库、状态机等多种场景。深入理解和掌握函数指针与指针函数，对于提升 C 语言编程…...

编程日记 2025/4/29 10:26:18

政策支持与市场驱动：充电桩可持续发展的双轮引擎

随着全球能源转型加速，新能源汽车成为实现低碳交通的重要方向。然而，充电基础设施不足仍是制约其普及的关键瓶颈。当前，国际主流的充电桩运营模式包括政府推动、电网企业推动及汽车厂商推动三种模式，但单一模式均存在显著局限性。…...

编程日记 2025/5/9 13:57:28

在 Ubuntu 22.04 x64 系统安装/卸载 1Panel 面板

一、 1Panel 是什么？ 1Panel 是一款基于 Go 语言开发的现代化开源服务器管理面板（类似宝塔面板），专注于容器化（Docker）和云原生环境管理，提供可视化界面简化服务器运维操作。 1. 1Panel主要功…...

编程日记 2025/5/15 14:08:20

dummy cli-tool ubuntu22.04使用

项目场景：dummy cli-tool ubuntu22.04使用提示：这里简述项目相关背景：执行python3 run_shell.py时报错例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) …...

编程日记 2025/4/29 10:26:15

厚铜板的镀前处理差异：工艺参数与成本影响

在现代电子设备中，厚铜电路板因其优异的导电性能和良好的热管理能力而备受青睐。生产过程中，对铜层进行电镀加厚是一个关键步骤，它涉及到一系列复杂的化学和物理过程。在进行电镀之前，必须对电路板进行适当的准备工作，…...

编程日记 2025/4/29 10:25:12

【C到Java的深度跃迁：从指针到对象，从过程到生态】第四模块·Java特性专精 —— 第十六章多线程：从pthread到JMM的升维

一、并发编程的范式革命 1.1 C多线程的刀耕火种 C语言通过POSIX线程（pthread）实现并发，需要开发者直面底层细节： 典型pthread实现： #include <pthread.h> int counter 0; pthread_mutex_t lock PTHREAD…...

编程日记 2025/5/15 8:40:47

数据库学习笔记(十三)---存储过程

前言： 学习和使用数据库可以说是程序员必须具备能力，这里将更新关于MYSQL的使用讲解，大概应该会更新30篇，涵盖入门、进阶、高级(一些原理分析);这一篇存储过程，下一篇是存储函数;虽然MYSQL命令很多，但是自…...

编程日记 2025/5/24 11:46:56

JWT（JSON Web Token）源码分析

Java - JWT的简单介绍和使用 Java JWT：原理、机制及案例示范什么是JWT？ 1.1 JWT的基本概念 JWT（JSON Web Token）是一种用于在各方之间传递JSON格式信息的紧凑、URL安全的令牌（Token）。JWT的主要作用是验…...

编程日记 2025/5/24 1:11:21

Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格

以下是 Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格： 1. app.component() 作用：注册全局组件参数： name：组件名称（字符串）component&#xff…...

编程日记 2025/5/24 11:29:01

Hadoop 单机模式（Standalone Mode）部署与 WordCount 测试

通过本次实验，成功搭建了 Hadoop 单机环境并运行了基础 MapReduce 程序，为后续分布式计算学习奠定了基础。掌握 Hadoop 单机模式的安装与配置方法。熟悉 Hadoop 环境变量的配置及 Java 依赖管理。使用 Hadoop 自带的 WordCount 示例程序进行简单的 …...

编程日记 2025/4/29 10:19:44

合并 #include <bits/stdc.h> using namespace std; #define asd(i,a,b) for(int ia;i<b;i) #define int long long const int inf 0x3f3f3f3f, N 1e5 5, Z 1e5; int n, m, fa[N], o[N][25], dep[N], tot, root[N], ans[N]; vector<int> g[N]; struct node…...

编程日记 2025/5/24 12:24:36

驱动开发硬核特训 │ 深度解析 fixed regulator 驱动与 regulator_ops

一、引言：本次目标本篇聚焦于： Regulator 子系统基础概念设备树节点与驱动代码的对应关系regulator_desc、regulator_ops、regulator_dev 的完整讲解驱动端的实际注册与管理流程通过一个实际案例，系统掌握 regulator 子系统的全貌。二…...

编程日记 2025/5/16 12:15:24

Linux中的shell脚本练习

1.判断字符串是否为空 #!/usr/bin/bash while : #:默认值为真 do read -p "请输入你的密码: " a pass123456 if [ -z $a ];thenecho "您输入的密码不能为空"exit 1 elseif [ $a $pass ];thenecho "登录成功"breakelseecho "您的密码输入有…...

编程日记 2025/5/24 11:34:21

MySQL基础篇 | 1-数据库概述与MySQL安装

【MySQL基础篇-1】数据库概述与MySQL安装 1. 数据库概述2. MySQL环境搭建2.1. MySQL的四大版本2.2. 软件下载1. 数据库概述 MySQL官网网站：https://dev.mysql.com/doc/relnotes/mysql/8.0/en/ SQL Server：SQL Server是微软开发的大型商业数据库。C#、.net等语言常使用，与wi…...

编程日记 2025/4/29 10:18:36

JVM 自动内存管理

一、运行时数据区域详解 Java 虚拟机在运行 Java 程序时，会将所管理的内存划分为多个不同的数据区域，各区域有着独特的用途、创建和销毁时间。程序计数器：作为线程私有的较小内存空间，它是当前线程执行字节码的行号指示器。字节…...

编程日记 2025/5/20 12:40:22

InitializingBean接口和@PostConstruct-笔记

1. InitializingBean 简介 1.1 功能简介 InitializingBean 是 Spring 框架中的一个接口，用在 Bean 初始化后执行自定义逻辑。它提供了 afterPropertiesSet() 方法，该方法在以下时机被 Spring 容器自动调用： 属性注入完成后（即所…...

编程日记 2025/4/29 10:17:31

考研408-计算机组成原理冲刺考点（1-3章）

第一章计算机系统概述 1.计算机核心早期的冯诺依曼计算机是以运算器为中心的，而现在的计算机是以存储器为中心的 2.五大部件 3.汇编程序、编译程序、解释程序的辨析...

编程日记 2025/5/24 0:08:39

模板方法模式（Template Method Pattern）

模板方法模式（Template Method Pattern）是一种行为型设计模式，它定义了一个操作中的算法骨架，将一些步骤的实现延迟到子类中。模板方法使得子类可以在不改变算法结构的前提下，重新定义算法中的某些步骤。一、基础 1. 意图定义一个操作中的算法骨架，将某些步骤延迟到…...

编程日记 2025/5/24 12:23:01

一文了解无人机系统

无人机系统，又称无人驾驶航空器系统（Remotely Piloted Aircraft System，RPAS），作为一个由无人机平台、遥控站、指令与控制数据链及其他部件构成的完整技术体系，其系统架构包含多个核心分系统。具体而言&…...

编程日记 2025/5/24 8:46:41

系统架构师2025年论文《论软件的设计模式》

论软件的设计模式摘要： 2016 年，我所在的公司承担了某市医院预约挂号系统的研发任务。我作为公司的技术总监，希望能打造基于该系统的系列产品，参与到项目的设计中，以期开发扩展性和可维护性良好的预约挂号系统，为以后的产品开发打下基础。网络靶场是网络安全技术研究的…...

编程日记 2025/5/20 18:18:01

集成电路流片随笔19：full_handshake

全双工握手接收模块 (full_handshake_rx)，它的功能是接收来自发送端 (tx) 的数据，并对发送端进行应答（ACK）。模块实现了基于握手的通信机制，以确保数据的可靠传输。模块的输入输出分别连接于发送端和接收端&#xff0c…...

编程日记 2025/5/15 13:48:42

Android Framework 探秘

以下文字来源AI，准确性不敢保证！ 安卓Framework层概述安卓的 Framework（框架层） 是安卓系统的核心组成部分，位于应用层和系统底层（如Linux内核）之间，负责为应用提供统一的接口和功…...

编程日记 2025/4/29 10:14:16

亚马逊云科技2025战略解析：AI驱动下的全球生态重塑

一、战略转向：从“云优先”到“AI优先”的核心逻辑 1. 千亿美元资本投入AI基建芯片自研突破：2025年资本支出70%投向AI芯片与液冷数据中心。自研芯片矩阵全面升级，包括3纳米工艺的Trainium3（算力提升4倍）、单核性能…...

编程日记 2025/4/29 10:13:10

NGINX ngx_http_addition_module 模块响应体前后注入内容

一、模块概述模块名称：ngx_http_addition_module引入版本：自 0.7.9 起支持 addition_types，0.8.29 起支持“*”通配；功能：对符合 MIME 类型的响应，在响应体前后分别插入指定子请求 URI 返回的内容&#x…...

编程日记 2025/4/29 10:11:00

SpringMVC 使用thymeleaf 进行数据展示

thymeleaf 是前端的视图解析器，可以用于html页面上变量的渲染，如何来使用thymeleaf，下面我们来说一下： 首先引入相关的依赖： <dependency><groupId>org.thymeleaf</groupId><artifactId>thym…...

编程日记 2025/4/29 10:10:58

Github两种鉴权模式PAT与SSH

Github两种鉴权模式PAT与SSH 文章目录 Github两种鉴权模式PAT与SSH1. PAT鉴权2. SSH鉴权3.两种鉴权的切换 1. PAT鉴权通过 HTTPS 协议克隆和推送代码，使用用户名/密码或个人访问令牌（PAT）鉴权，所以PAT是与HTTPS协议相关的。该鉴…...

编程日记 2025/5/13 10:09:22

XrayR启动失败

公司要用服务器之间进行数据加密，这里用的XrayR 我使用的Centos 7。我这里使用一键脚本安装后，/etc/XrayR目录下没有配置文件。解决方案 XrayR安装时，系统没有unzip工具，也是会安装失败的，因为Centos7已经停止维…...

编程日记 2025/4/29 10:09:52

FPGA-数字时钟

FPGA-数字时钟总体设计用FPGA驱动数码管按照HH-MM-SS的格式显示时间，每秒用串口向上位机发送当前时间，当串口收到HH:MM:SS，对时间进行校准。由于年月要考虑到大小月，闰年等。为了简单起见，只考虑时分秒。数码管…...

编程日记 2025/5/22 4:23:11

数据结构 RBT 插入操作的 Python 代码实现

目录一、红黑树的性质二、红黑树的插入1. 插入根节点或根节点变红2. 双亲节点 P 为黑色3. 双亲结点 P 和叔伯结点 U 均为红色4. 双亲结点 P 为红色，叔伯结点 U 为黑色或缺失1）情形一2）情形二三、插入的 Python 代码实现红黑树动画演示网站…...

编程日记 2025/5/15 6:27:42

颖儿生活提案：用海信璀璨505U6真空冰箱重建都市鲜食自由

热播剧《六姊妹》中，演员颖儿饰演的何家艺以泼辣坚韧的形象深入人心，一双手撑起家庭的"烟火气"；戏外，她平衡事业与家庭，以自律姿态书写鲜活人生。近日，颖儿向公众展示家中厨房，意外…...

编程日记 2025/5/24 2:14:17

JQuery 使用技巧

文章目录隐藏/显示淡入淡出滑动追加新元素删除元素/内容设置 CSS 样式尺寸遍历Ajax根据 input 控件中的值实时改变另一个值 $()是jQuery()的简写getElementByTagName();如： $(“div”)getElementByTagName(“div”); $()的作用是用于查找出 HTML 的标签、属性、样…...

编程日记 2025/4/29 10:07:45

光流法：从传统方法到深度学习方法

1 光流法简介光流（Optical Flow）是指图像中像素灰度值随时间的变化而产生的运动场。简单来说，它描述了图像中每个像素点的运动速度和方向。光流法是一种通过分析图像序列中像素灰度值来计算光流的方法。对于图像数据计算出来的光流是一个二…...

编程日记 2025/4/29 10:07:44

如何选择合适的RFID手持终端设备？

一、明确核心需求，锁定关键参数选购RFID手持终端的首要任务是明确应用场景的核心需求。若用于仓储物流或零售盘点，推荐选择上海岳冉超高频RFID手持终端设备，支持1-20米远距离批量读取；若用于医疗耗材或图书管理，岳冉高…...

编程日记 2025/5/12 23:08:06

Axios 传参与 Spring Boot 接收参数完全指南

Axios 传参与 Spring Boot 接收参数完全指南本文详细说明前端 Axios 传参与后端 Spring Boot 接收参数的各类场景，包括 GET/POST/PUT/DELETE 请求、路径参数/查询参数/请求体参数的传递方式，以及如何接收 List、Map 等复杂类型。通过代码示例和对比表…...

编程日记 2025/4/29 10:07:41

NdrpPointerUnmarshallInternal函数分析之pStubMsg--pAllocAllNodesContext的由来

第一部分： // // Check if this is an allocate all nodes pointer AND that were // not already in an allocate all nodes context. // if ( ALLOCATE_ALL_NODES(pFormat[1]) && ! pStubMsg->pAllocAllNodesContext …...

编程日记 2025/5/19 6:17:02

人脑、深思考大模型与其他大模型的区别科普

文章目录大模型的基本概念与特点深思考大模型的独特之处深思考大模型与其他大模型的对比架构与技术训练数据应用场景提示词编写大模型给出答案的方式：基于概率还是真的会分析问题？人脑的思考过程基本单位与网络大脑结构与功能分区信息处理流程思维模式…...

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

Unity-粒子系统：萤火虫粒子特效效果及参数

萤火虫特效由两部分组成。萤火虫粒子底色粒子面片。萤火虫的旋转飞动主要由 Noise参数和Color over Lifetime模块控制。贴图：中间实周边虚的圆，可随意自行制作 Shader：Universal Render Pipeline/2D/Sprite-Lit-Default 以下是粒子详细参…...

编程日记 2025/4/29 10:06:37

Java垃圾收集器与内存分配策略深度解析

在 Java 与 C 的世界里，内存动态分配与垃圾收集技术仿佛筑起了一道高墙。墙外的人渴望进入，享受自动内存管理的便利；而墙内的人却试图突破，追求更高的性能与控制力。今天，就让我们深入探讨 Java 的垃圾收集器与内存分配…...

编程日记 2025/4/29 10:06:36

相关文章：