前端根据目录生成模块化路由routes

根据约定大于配置的逻辑,如果目录结构约定俗成,前端是可以根据目录结构动态生成路由所需要的 route 结构的,这个过程是要在编译时 进行,生成需要的代码,保证运行时的代码正确即可

主流的打包工具都有对应的方法读取文件目录

  • Webpack: require.context

  • Vite: import.meta.glob

下面以Vite框架讲解例子,具体的需求就需要更复杂的处理,
先进行约定:

1.单个页面都写在src/page文件夹下面
2. 页面的相关信息都用page.ts定义(类似微信小程序那个页面配置文件),这里是存储路由的meta额外信息
3.页面组件的入口名字都要统一叫 index.tsx
4…

这是目录结构:
在这里插入图片描述
直接进入Vite的入口文件main.tsx,在路由渲染前生成routes 数组,

// mainx.tsx// 1、获取所有的page的相关信息
let pages = import.meta.glob('./page/**/pages.ts', {eager: true, //直接获取导出结果import: 'default' //导出的形式
})// 2、获取路由组件index.tsx的动态导入函数(运行时动态引入组件文件)
let components = import.meta.glob('./page/**/index.tsx')// 3、生成routes数组
const routes = Object.entries(pages).map(([filePath, meta]) => {let RoutePath = filePath.replace('./page', '').replace('/pages.ts', '') || '/'let CompPath = filePath.replace('pages.ts', 'index.tsx')return {path: RoutePath,name: RoutePath.split('/').filter(Boolean).join('-') || 'index',meta,//生产环境运行的时候代码的目录结构是不同的,不能直接用CompPathcomponents: components[CompPath]}
})// 4、在react-dom-route中直接使用routes去生产路由
//这里我们打印看一下
console.log('======routes', routes)

可以看到结果是正确的,果然生成了要的数组,如果有特别的就在增加一下代码满足需求
在这里插入图片描述

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

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

相关文章

【不容错过】可灵AI重磅更新:画质升级,运镜控制,首尾帧自定义,还有30万创作激励奖金!

还记得最近在各大平台肆虐的老照片变成视频吗,就是用快手的可灵AI做的,今天可灵又迎来了一次重大更新。 「电脑端上线了」 之前一直用其他工具生的图片还需要保存到手机上,再用可灵来生成视频,很多人都能感受到手机操作不太方便&…

Vue3项目给ElementPlus设置中文的两个方案

介绍 在Vue3项目将ElementPlus切换为中文 1、在App.vue的文件中修改 <template><el-config-provider :locale"zhCn"><router-view></router-view></el-config-provider> </template><script lang"ts" setup>im…

elasticsearch源码分析-04集群状态发布

集群状态发布 cluster模块封装了在集群层面执行的任务&#xff0c;如集群健康、集群级元信息管理、分片分配给节点、节点管理等。集群任务执行之后可能会产生新的集群状态&#xff0c;如果产生新的集群状态主节点会将集群状态广播给其他节点。 集群状态封装在clusterState中&…

Linux下网络编程-简易poll服务器和客户端

Linux下网络编程-简易poll服务器和客户端 简易poll服务器: //编译命令&#xff1a;g -g xxx.cpp -o xxx #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h…

ionic7 使用Capacitor打包 apk 之后,设置网络权限

报错处理 在打包的时候遇到过几个问题&#xff0c;这里记录下来两个 Visual Studio Code运行ionic build出错显示ionic : 无法加载文件 ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在 ionic7 项目初始化以及打包 apk 这篇文章讲到了如果安装…

2-25 基于matlab的语音信号降噪处理算法

基于matlab的语音信号降噪处理算法&#xff0c;采用谱减法&#xff0c;可以对强噪声背景下的语音信号进行去噪。输入原始信号及加噪信号&#xff0c;对加噪信号进行降噪&#xff0c;并提高信噪比。程序已调通&#xff0c;可直接运行。 2-25 语音信号降噪处理算法 谱减法 - 小红…

餐饮管理系统-计算机毕业设计源码43667

餐饮管理系统 摘 要 在信息化、数字化的时代背景下&#xff0c;餐饮行业面临着前所未有的挑战与机遇。为了提高运营效率、优化顾客体验&#xff0c;餐饮企业亟需一套高效、稳定且灵活的管理系统来支撑其日常运营。基于Spring Boot的餐饮管理系统应运而生&#xff0c;成为餐饮行…

mac 安装nvm的教程

在macOS上切换Node.js版本&#xff0c;可以使用nvm&#xff08;Node Version Manager&#xff09;。以下是安装nvm和切换Node.js版本的步骤&#xff1a; 安装nvm 下载方式 终端复制输入&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.…

教育科研行业算力池化解决方案

教育科研行业算力池化解决方案 解决方案概述 1. 算力资源集中管理 建立校级算力中心:通过信息中心建设校级的算力中心,将分散在各学院或科研团队的算力资源集中管理。利用算力池化技术:采用先进的算力池化技术(如趋动科技的OrionX),将物理GPU资源切分为多个虚拟GPU(vGP…

GIT - 一条命令把项目更新到远程仓库

前言 阅读本文大概需要1分钟 说明 更新项目到远程仓库只需要执行一条命令&#xff0c;相当的简便 步骤 第一步 编辑配置文件 vim ~/.bash_profile第二步 写入配置文件 gsh() {local msg"${1:-ADD COMMIT PUSH}"git add . && git commit -m "$m…

mipi协议中的calibration和scramble模式

在MIPI(Mobile Industry Processor Interface)协议中,calibration(校准)和scramble(加扰)模式是两个重要的特性,它们分别用于优化数据传输的准确性和减少信号干扰。以下是对这两个模式的详细解析: Calibration(校准)模式 目的与功能: 校准模式主要用于优化和补偿由…

数据库关键字执行顺序

在 SQL 中&#xff0c;关键字的执行顺序通常如下&#xff1a; FROM&#xff1a;确定要查询的表或数据源&#xff0c;并执行表之间的连接操作&#xff08;如 INNER JOIN、LEFT JOIN 等&#xff09;。FROM 子句执行顺序为从后往前、从右到左。ON&#xff1a;应用连接条件&#xf…

C生万物之文件操作

文章目录 一、为什么使用文件&#xff1f;二、什么是文件&#xff1f;1、程序文件2、数据文件3、文件名 三、文件的打开和关闭1、文件指针2、文件的打开和关闭 四、文件的顺序读写1. 8个重要的库函数1.1 单字符输入输出【fputc和fgetc】1.2 文本行输入输出【fputs和fgets】1.3 …

主干网络篇 | YOLOv5/v7 更换主干网络之 ShuffleNetv2 | 高效CNN架构设计的实用指南(2)

主干网络篇 | YOLOv5/v7 更换主干网络之 ShuffleNetv2 | 高效CNN架构设计的实用指南 概述 YOLOv5和YOLOv7是目前主流的轻量级目标检测模型&#xff0c;在速度和精度方面取得了良好的平衡。然而&#xff0c;传统的YOLOv5/v7模型使用FPN和CSPNet等结构作为主干网络&#xff0c;…

机器学习 C++ 的opencv实现SVM图像二分类的测试 (三)【附源码】

机器学习 C 的opencv实现SVM图像二分类的测试 (三) 数据集合下载地址&#xff1a;https://download.csdn.net/download/hgaohr1021/89506900 根据上节得到的svm.xml&#xff0c;测试结果为&#xff1a; #include <stdio.h> #include <time.h> #include <o…

网络安全应急处理流程

网络安全应急处理流程是指在发生网络安全事件时&#xff0c;组织应采取的一系列措施&#xff0c;以快速响应、控制、恢复和调查网络安全事件&#xff0c;确保业务连续性和数据安全。以下是一个详细的网络安全应急处理流程&#xff1a; 1. 准备阶段 目标&#xff1a;建立和维护…

yolov5 json 和 txt数据格式关系

训练阶段 和 推理阶段数据格式转换说明 关于yolov5 数据格式一直以来都傻傻分不清楚&#xff0c;这下进行了一个梳理&#xff0c;做了笔记&#xff0c;也希望可帮助到有需要的有缘人~ 转换部分代码

大厂面试官赞不绝口的后端技术亮点【后端项目亮点合集(2):消息队列、ElasticSearch、Mysql等亮点合集】

本文将持续更新~~ 历史文章&#xff1a; 后端项目亮点合集&#xff08;1&#xff09;&#xff1a;Redis篇_后端项目有什么亮点-CSDN博客 本文的作用&#xff1a; &#xff08;1&#xff09;简历优化&#xff1a;针对自己的简历&#xff0c;对Redis亮点进行优化升级&#xff0c;…

虚拟机交叉编译基于ARM平台的opencv(ffmpeg/x264)

背景&#xff1a; 由于手上有一块rk3568的开发板&#xff0c;需要运行yolov5跑深度学习模型&#xff0c;但是原有的opencv不能对x264格式的视频进行解码&#xff0c;这里就需要将ffmpegx264编译进opencv。 但是开发板算力有限&#xff0c;所以这里采用在windows下&#xff0c;安…

【chatgpt】 PyTorch中reshape和view

在 PyTorch 中&#xff0c;reshape 和 view 都用于改变张量的形状&#xff0c;但它们在实现和使用上有一些重要的区别。理解这些区别对于在复杂的张量操作中选择合适的方法非常关键。 view 方法 连续性要求&#xff1a;view 方法要求原始张量在内存中是连续的。如果张量不是连…