哈喽,大家好!我是「励志前端小黑哥」,我带着最新发布的文章又来了!
专注前端领域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 组件文件自动生成路由配置。
typescript
// 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
中进行配置,这样才能排除相对路径对函数引用造成的影响。比如,
ts
import { defineConfig } from 'vite'
import * as path from 'node:path'
export default defineConfig({
resolve: {
alias: {
// 别名
'@': path.resolve(__dirname, 'src')
}
}
//...其他配置
})
3. 函数引用
在 Vue Router 配置文件中使用这个生成的路由:
typescript
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:文章看完了,如果本文对你有所帮助,请点赞、收藏,这样能让更多人知道!
励志前端小黑哥,全网唯一账号!
关注我,带你了解更多前端知识!