React+vite批量引入文件并注册路由

c553057872

已于 2023-03-12 14:46:50 修改

阅读量527

点赞数

文章标签： react.js javascript 前端 Powered by 金山文档

于 2023-03-10 18:33:47 首次发布

本文链接：https://blog.csdn.net/c553057872/article/details/129448793

版权

本文介绍了如何在React项目中，基于vite，通过import.meta.glob方法批量引入并注册路由。作者在尝试避免手动添加每个路由组件时，发现了解决方案，即同步引入文件夹下所有组件，并封装路径，最后动态注册路由，使得添加新组件时无需每次都修改路由配置。

摘要由CSDN通过智能技术生成

目前我自己正在学习React，模仿Ant Design的官网组件文档页面做了一个项目，用react+vite+ts写的。

页面结构就是这样的，就是通过二级路由局部替换页面内容。

我没有使用userRoutes配置路由，而是直接用的<Route>标签。

然后就出现了一个问题，我左侧菜单很多，这样我要在<Routes>里面写很多很多的<Route>，而且每次加新的组件都要加<Route>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

c553057872

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React+vite批量引入文件并注册路由

组件较多时批量引入文件并注册路由
复制链接

扫一扫

第二章 Vite4 + Vue3 + Vtkjs 布局

Etc.End的博客

04-02

636

这篇文章本来不想写的，因为大家都会，最终还是决定写一下，目的是不想来看的小伙伴被搞得一头雾水，莫名奇妙的就出现很多代码，前后对不上。既然是专栏，那么就要有始有终。每一步的代码都能呈现出来，达到一个完整性。那么一个系统不管是成型的还是一个demo，最起码的就是看起来像那么回事。布局的话我采用上下结构，上面的话可以放一些logo，导航什么的。下面分为左右部分，左侧显示模型的一些信息，如果批量导入的话可以对指定模型进行处理。右侧就是我们的可视化区域。

react

Jasmin博客

05-27

1122

面试

参与评论您还未登录，请先登录后发表或查看评论

React路由

webchang的博客

12-07

1929

react路由规则，编程式导航，匹配模式，传递参数等

react+vite实现批量引入本地文件

qq_45919328的博客

02-22

388

vite实现批量引入本地文件

react 配合vite，利用 import.meta.glob，实现动态路由

最新发布

u013675821的博客

07-09

355

);通过以上步骤，我们使用 Vite 作为构建工具，并利用 import.meta.glob 动态导入组件，通过后端接口获取授权菜单数据并在 React 应用中生成动态路由。这样可以根据用户的不同权限进行菜单和路由的动态生成和控制。根据具体需求，可以进一步优化和扩展权限逻辑。

vite批量导入文件，并且注册全局控件

chendf__的博客

04-13

4060

记录下vite中如何批量导入文件在webpack中批量导入文件 const modulesFiles = require.context('./modules', true, /\.vue$/) 我使用的是vite+ts+vue3 vite中导入批量文件，新建文件 glot.ts import { App, Component } from 'vue' interface GolbComponentType { name: string, component: Component }

Vite中批量引入模块

qq_50541792的博客

03-19

685

vite中实现批量引入

关于vite2与vite3路由批量导入问题Ts版本

mh18810405067的博客

04-03

307

帮助使用vue3+vite2/vite3的伙伴快速创建自动批量导入路由

react自动化构建路由

sdasadasds的博客

06-28

501

在使用在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用中提供的模式来编写我们的路由,这样写的好处就是我们可以将逻辑集中在一处,配置路由比较方便https://gitee.com/d718781500/autoRouter我们先将下列数据定义在中在react的路由官方文档中就提供了配置集中式路由的案例,大致是这样的仿照的路由,生成一个配置文件,预期是这样的我们可以通过上述配置,来生成一个路由.当然上述的配置也只是做了

vite + vue3 + setup + pinia + ts 项目实战

qq_46416934的博客

03-09

1272

介绍一个使用 vite + vue3 + pinia + ant-design-vue + typescript 完整技术路线开发的项目，秒级开发更新启动、新的vue3 composition api 结合 setup纵享丝滑般的开发体验、全新的 pinia状态管理器和优秀的设计体验（1k的size）、antd无障碍过渡使用UI组件库 ant-design-vue、安全高效的 typescript类型支持、代码规范验证、多级别的权限管理~ 前言前两天接到了一个需求，就是把原来的一个项目的主要功能模块和用

vite-pages:使用:high_voltage:Vite的glob导入生成路由

03-20

访问页面使用的vue-router的基于文件系统的路由生成器。入门安装页面页面： $ npm install vite-pages 添加到您的应用程序条目中： import App from './App.vue' import { createApp } from 'vue' import { createRouter , createWebHistory } from 'vue-router' import { generateRoutes } from 'vite-pages' // https://vitejs.dev/guide/features.html#glob-import const pages = import . meta . glob ( './pages/**/*.vue' ) const options = { } const routes = gen

vite中批量导入文件，以pinia状态管理为例

业余前端的职业经历

05-19

1001

这里再啰嗦几句话，我觉得吧前端同学特别是工作一年以上还没怎么接触或者使用ts的童鞋，还是最好玩玩，可能刚上手比较痛苦，各种比较莫名其妙的报错，但当你真正慢慢熟悉就会发现它的方便和魅力所在。一般来说每个公司有自己架子习惯哈，这个会有所不同，所以一会看我的例子的时候首先看是否适合你的项目哈。vite中有一个批量导出的工具函数 import.meta.glob。每个项目不太一样哈，仅仅做参考例子，没有更好的只有适合的。回归正题，随着项目变大之后，状态管理文件也越来越多。拿单独的a文件举例 a.ts。

使用webpack或者vite批量导入模块

weixin_52017993的博客

04-27

624

有时候我们需要一次性导入文件夹下的所有js文件，如何一次性的导入呢？

vite中的glob-import批量导入

jieyucx的博客

07-10

1540

一个返回由Promise异步引入的键值对对象（相对于当前模块的相对路径 -> 该模块的异步导入函数）。: 一个返回由同步引入的键值对对象（相对于当前模坐的相对路径 -> 该模块的导出对象）。使用 Vite 的 glob 导入，可以完成模块引用的实时更新，以及开发服务器的热更新。值得注意的是，对于Vue组件，模块内容都是在default中，所以访问时需要加上。是同步加载，返回的是一个包含路径和模块内容的对象，适合于模块较少的情况。返回的是一个由模块路径和模块异步导入函数构成的键值对对象，而。

基于vue3异步组件、动态组件、vite批量导入实现路由权限动态管理（非addRoute方案）

个人博客

02-27

1259

开发后台管理系统必备的需求：动态菜单权限管理、或者说路由权限动态管理原理是通过addRoute这里就不具体论述了这里介绍一个个人研究的，在vite+vue3下的动态菜单权限管理实现方案：这是一个由后端动态菜单控制的解决方案，需要后端传异步组件的路径值基于异步组件和动态组件，而不是addRoute。

react+vite批量引入某文件夹下面的组件作为组件

Pure_White520的博客

09-12

642

react+vite项目中一次性引入某文件夹下的所有组件并注册和使用的过程。

react组件中批量引入图片

baidu_38027860的博客

02-18

6715

在开发官网等一些偏静态类的网站时，经常会碰到某个组件中需要用到多张图片，正常引入方式如： import demoBJ from '../../images/demo1.jpg' 所产生的问题就是如果我用到了十张图片资源，同类代码就需要写上十次，麻烦而且不易维护，所以可以采用下面的方式进行整理。 const maths = { fixedView1 : "" , fixed...

react + vite +ts 中封装svgicon组件

07-13

在 React + Vite + TypeScript 中封装 SVGIcon 组件可以按照以下步骤进行： 1. 创建一个新的组件文件，可以命名为 `SVGIcon.tsx`。 2. 引入 React 和 SVGIcon 的依赖： ```tsx import React from 'react'; import ...