引言

每当我看到前人写的路由文件，我就头大，一页能写上千行路由配置

我受不了了，于是我用 vite 提供的读取文件API，写了个自动生成路由的函数

支持读取 meta.(js | ts) 文件

支持 嵌套路由

实现

如果你只是做普通的单级文件，那么很简单

但是要实现嵌套路由，还是有一定复杂度的

所以这次我就不解说源码，大家可以上 npm 自行查阅

自动生成路由npm链接

安装

npm i @jl-org/vite-auto-route

使用

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 会被自动提取出来

例子

如图，我想没人会写这种变态的嵌套路由吧

最终会生成如下图的结构，名字我使用的是大驼峰拼接的

原文链接：https://juejin.cn/post/7325791449664045108 作者：寅时码