前端根据目录生成模块化路由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)
可以看到结果是正确的,果然生成了要的数组,如果有特别的就在增加一下代码满足需求
相关文章:

前端根据目录生成模块化路由routes
根据约定大于配置的逻辑,如果目录结构约定俗成,前端是可以根据目录结构动态生成路由所需要的 route 结构的,这个过程是要在编译时 进行,生成需要的代码,保证运行时的代码正确即可 主流的打包工具都有对应的方法读取文…...

Blender新手入门笔记收容所(一)
基础篇 基础操作 视角的控制 控制观察视角:鼠标中键平移视图:Shift鼠标中键缩放视图:滚动鼠标中键滚轮 选中物体后:移动物体快捷键G,移动后单击鼠标就会定下来。 进入移动状态后:按Y会沿着Y轴移动进入移动…...

修改服务器挂载目录
由于我们的项目通常需要挂载一个大容量的数据盘来存储文件数据,所以我们每台服务器都需要一个默认的挂载目录来存放这些数据,但是由于我们的误操作,导致挂载目录名字建错了,这时候后端就读不到挂载目录了,那我们我们的…...

Linux+InternStudio 关卡
ssh连接 端口映射 本地...

如何提升美国Facebook直播的整体体验?
Facebook作为全球最大的社交媒体平台之一,提供了直播功能,用户可以实时分享生活、见解和创意。许多商家通过美国Facebook直播来获取更多客户,但直播时可能会遇到网络卡顿的问题,导致观看体验不佳。本文将探讨如何解决这个问题&…...
flutter项目与原生项目相比,性能比较差的原因
Flutter 项目相对于原生项目有时会表现出性能上的差异,主要原因如下: 1. 框架层的额外开销 Flutter 是一个跨平台框架,它通过 Dart 语言编写代码,并使用 Flutter 引擎将其编译成原生代码。这种跨平台的抽象层不可避免地会引入一…...

第二周:李宏毅机器学习笔记
第二周学习周报 摘要Abstract一、深度学习1.Backpropagation(反向传播)1.1 链式法则1.2 Forward pass(前向传播)1.3 Backward pass(向后传播)1.4 总结 2. Regression(神奇宝贝案例)2…...

搜维尔科技:【研究】Scalefit是一款可在工作场所自动处理3D姿势分析结果的软件
Scalefit是一款可在工作场所自动处理 3D 姿势分析结果的软件。这甚至可以在衡量员工的同时发生。然后,Scalefit 根据国际标准对姿势、压缩力和关节力矩进行分析和可视化。 3D姿势分析 如今,Xsens 技术可让您快速测量工作场所员工的态度。一套带有 17 个…...

网络编程:各协议头(数据报格式)
一、mac头 二、ip头 protocol——tcp/udp (7)TTL——生存时间 三、tcp头 四、udp头...
SpringBoot报错:The field file exceeds its maximum permitted size of 1048576 bytes
报错信息 The field file exceeds its maximum permitted size of 1048576 bytes原因是 SpringBoot内嵌的 tomcat 默认的所有上传的文件大小为 1MB 解决办法 修改配置 spring:servlet:multipart:max-file-size: 50MBmax-request-size: 50MB或者 spring.servlet.multipart.…...

C++的介绍与认识
目录 前言 1.什么是C 2.C的发展历史 3.C参考文档 4.C重要性 4.1C特点 4.2编程语言排行榜 4.3 C的应用领域 5.C学习指南 1. 基础知识 2. 面向对象编程(OOP) 3. 泛型编程 4. 标准库(STL) 结束语 前言 学习了C语言的知识…...

Spark源码详解
https://www.cnblogs.com/huanghanyu/p/12989067.html#_label3_3...

浅尝Apache Mesos
文章目录 1. Mesos是什么2. 共享集群3. Apache Mesos3.1 Mesos主节点3.2 Mesos代理3.3 Mesos框架 4. 资源管理4.1 资源提供4.2 资源角色4.3 资源预留4.4 资源权重与配额 5. 实现框架5.1 框架主类5.3 实现执行器 6. 小结参考 1. Mesos是什么 Mesos是什么,Mesos是一个…...
buuctf题目讲解-1
一眼就解密 ZmxhZ3tUSEVfRkxBR19PRl9USElTX1NUUklOR30 flag{THEFLAGOFTHISSTRING} base家族 base64 加密原理: 明文:abc 去找ascii码的二进制形式 a-->97-→01100001 (二进制为8位如果不足8位则在最左边补0至8位) b-→…...

软件测试学习之-ADB命令
ADB命令 adb工具即Android Debug Bridge(安卓调试桥) tools。它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互。在某些特殊的情况下进入不了系统,adb就派上用场啦! Android程序的开发通常需要使用到一…...

Redis的入门导读(一)
目录 单机架构 分布式系统 个人总结 一.Redis的介绍 二.Redis特性 三.Redis的快原因 四.Redis的应用场景 五.Redis的总结 由于Redis和分布式系统息息相关,因此我们需要先了解一下,分布式系统! 接下来就是分布式系统的演化过程。 单…...
H5与小程序:两者有何不同?
H5,即HTML5,是构建Web内容的一种语言描述方式,也是互联网的下一代标准,被认为是互联网的核心技术之一。HTML5是在HTML4.01的基础上进行了一定的改进后的规范,用户在使用任何手段进行网页浏览时看到的内容原本都是HTML格…...

计算机视觉、目标检测、视频分析的过去和未来:目标检测从入门到精通 ------ YOLOv8 到 多模态大模型处理视觉基础任务
文章大纲 计算机视觉项目的关键步骤计算机视觉项目核心内容概述步骤1: 确定项目目标步骤2:数据收集和数据标注步骤3:数据增强和拆分数据集步骤4:模型训练步骤5:模型评估和模型微调步骤6:模型测试步骤7:模型部署常见问题目标检测入门什么是目标检测目标检测算法的分类一阶…...

7月10日学习打卡,环形链表+栈OJ
前言 大家好呀,本博客目的在于记录暑假学习打卡,后续会整理成一个专栏,主要打算在暑假学习完数据结构,因此会发一些相关的数据结构实现的博客和一些刷的题,个人学习使用,也希望大家多多支持,有…...

鸿蒙语言基础类库:【@ohos.util.TreeSet (非线性容器TreeSet)】
非线性容器TreeSet 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 T…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...

c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...