引言
每当我看到前人写的路由文件,我就头大,一页能写上千行路由配置
我受不了了,于是我用 vite 提供的读取文件API
,写了个自动生成路由的函数
支持读取 meta.(js | ts) 文件
支持 嵌套路由
实现
如果你只是做普通的单级文件,那么很简单
但是要实现嵌套路由,还是有一定复杂度的
所以这次我就不解说源码,大家可以上 npm 自行查阅
安装
bash
npm i @jl-org/vite-auto-route
使用
ts
import { genRoutes } from '@jl-org/vite-auto-route'
import { createRouter, createWebHistory } from 'vue-router'
const routes = genRoute()
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
仅需一行代码即可使用,甚至有 markdown 的文档
文件规范
/src/views/index.vue
作为路由入口
子文件夹可嵌套
meta 必须使用默认导出的方式
根文件夹
|-- src
|-- views
|-- index.vue
|-- meta.(ts | js)
|-- about
|-- index.vue
|-- meta.(ts | js)
|-- nestFloder
|-- index.vue
|-- meta.(ts | js)
如上图示例,因为 vite 的工具,无法使用变量来查找目录
所以你的路由需按照配置写,不能自定义配置
在/src/views/
下建立你的路由文件吧
/src/views/index.vue
,会作为路由的首页
/src/views/about/index.vue
,会作为首页的子路由
meta 为可选项
如何传递 meta ?
在同级目录下,创建一个 meta.ts | meta.js 文件
并默认导出一个对象,该对象包含了所有需要传递的 meta 信息。
如何使用嵌套路由 ?
在一个目录下,创建一个新的文件夹,里面包含 index.vue 文件即可
如果使用路由守卫?
在 meta.ts | meta.js 文件中,添加一个 beforeEnter 函数即可
beforeEnter 会被自动提取出来
例子
如图,我想没人会写这种变态的嵌套路由吧
最终会生成如下图的结构,名字我使用的是大驼峰拼接的