哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！
专注前端领域10年+，专门分享那些没用的前端知识！
今天要分享的内容，是一段路由加载的函数代码，这段代码能自动读取目录中的*.vue文件，并将他们自动组装成Vue3的路由。
前言
在现代前端开发中，单页面应用（SPA）已成为主流，Vue.js作为一个轻量级且功能强大的前端框架，被广泛应用于各种项目中。
在Vue3中，Vue Router是其官方提供的路由管理器，用于处理不同视图之间的切换。在大型项目中，手动定义所有路由可能会变得繁琐且容易出错。
因此，编写一个能够根据文件结构自动生成路由的函数，可以极大地提高开发效率。本文将分享一个这样的函数，希望对你有所帮助。
需求分析
假设我们有这么一个目录结构
文章配图
那我们的需求就是，将目录结构转换为如下可访问的链接：
http://host/car
http://host/device
http://host/env
http://host/index
http://host/people
......
技术点
- Vue3 和 Vue Router：Vue3 提供了更强大的组合式 API，Vue Router 也进行了相应的更新，支持更好的类型检查和模块化管理。
-
文件遍历：使用Vite的
import.meta.glob函数来遍历项目目录，获取所有组件文件路径。 - 动态路由生成：根据获取的文件路径，动态生成 Vue Router 的路由配置。
实现步骤
1. autoImportVueRouter函数的实现代码
下面我在项目中使用的示例代码，用于根据指定目录下的 Vue 组件文件自动生成路由配置。
// file: autoImportVueRouter.ts
export default function autoImportVueRouter () : Array<VueRouter.RouteRecordRaw> {
// 加载views下的所有文件，注意：这里的路径`@`
const views = import.meta.glob('@/views/**/**.vue')
// 标识index.vue路径是否存在
let indexExist = false
const subRouter: Array<VueRouter.RouteRecordRaw> = Object.keys(views).map(function (key:string) {
const component = views[key]
const path = key.toLowerCase().replace(/\.vue$/, '').replace(/.+\/views/g, '')
if (path === '/index') indexExist = true
return {
path,
component
}
})
// 标识index.vue路径必须存在，否则首页不知道往跳转
if (!indexExist) throw new Error('src/views目录下必须存在Index.vue')
return subRouter
}
上面函数的关键代码就是import.meta.glob('@/views/**/**.vue')，它能从文件系统中导入多个模块。
这里是该函数的介绍：https://vitejs.cn/vite5-cn/guide/features.html#glob-import
2. 该函数内的注意点
另外需要注意的一个点，是路径'@/views/**/**.vue'中的@符号，它需要在vite.config.ts中进行别名的配置。如果使用ts，还需要在tsconfig.json中进行配置，这样才能排除相对路径对函数引用造成的影响。比如，
import { defineConfig } from 'vite'
import * as path from 'node:path'
export default defineConfig({
resolve: {
alias: {
// 别名
'@': path.resolve(__dirname, 'src')
}
}
//...其他配置
})
3. 函数引用
在 Vue Router 配置文件中使用这个生成的路由：
import * as VueRouter from 'vue-router'
import autoImportVueRouter from './autoImportVueRouter'
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory('/'),
routes: [
// 首页重定向，配合autoImportVueRouter函数内的if判断
{
path: '/',
redirect: '/index'
},
// 使用路由
...autoImportVueRouter(),
// 其他路由全部返回404
{
path: '/:pathMatch(.*)*',
redirect: '/404'
}
]
})
export default router;
至此，整个调用流程就实现了，后续无论新增/删除了什么文件，再次打包构建之后，我们都不需要再去修改维护我们的路由模块了。
对于大型项目，或者一部分懒人，这个方式引入路由非常的方便！
举一反三
通过vite的glob的多模块导入功能，我们还可以做更多的事情。比如，
- 全局组件自动加载：与路由的差别只是将路由变成了组件，然后利用组件的全局注册功能，将组件自动加载到项目中，方便其他各个页面调用。
- 批量导入多个图片/资源：图片或其他资源也可以类似操作，然后在脚本中拿到它们，这在做图片循环的时候也是比较常用的。
- 项目所有内容全部批量导入，构造一个基于配置的项目架构：无论图片、模块、路由等，全部可以通过glob导入，这样就可以根据自身项目情况来解析它们，将其抽离成配置文件后，就形成了一套固定的开发流程。如果想要完全掌控项目，这么做是非常有必要的。
结语
通过上述方法，我们可以实现 Vue3 项目中根据文件路径自动生成路由的功能，这不仅减少了手动配置路由的工作量，还提高了项目的可维护性和可扩展性。
希望这个函数能对你的 Vue3 项目开发有所帮助，让你在构建大型单页面应用，或者组件的管理过程中，更加得心应手。
PS：文章看完了，如果本文对你有所帮助，请点赞、收藏，这样能让更多人知道！
励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！
网友评论