Vue3自动路由注册

传统的路由注册，是固定定义好哪些路由映射哪些页面，如：

import {RouteRecordRaw} from "vue-router";

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/home.vue')
    }
] as RouteRecordRaw[]

export default routes

在示例代码中，路由/映射views/home.vue。

随着项目越来越大，目录层级会越来越多，路由相对的也会增多。如何利用文件目录层级结构自动构建出前端路由时必须考虑的问题。

思路

在动手之前，了解下Vue项目的基本结构，它是由：布局->页面->组件来构成一张网页的所有要素。

布局决定了大方向，网站是上下结构，还是左右，分几栏。
页面决定了内容页需要有哪些组件。
组件就是页面基础零件。

所以，在处理路由的时候，由App.vue通过router-view渲染布局layout，布局layout通过router-view渲染页面view，页面view摆放组件component

这就形成了父子路由的关系：

import {RouteRecordRaw} from "vue-router";

const routes = [
    {
        path: '/admin',
        name: 'admin',
        component: () => import('@/layouts/admin.vue'),
        children: [
            {
                path: 'user',
                name: 'user',
                component: () => import('@/views/admin/user.vue')
            }
        ]
    }
] as RouteRecordRaw[]

export default routes

当访问http://localhost:3000/admin/user的时候就展示了admin布局下的user页面。

有了这样的了解，那思路就一目了然了。我们可以先遍历layouts目录，得到所有父级路由，再通过遍历views页面，找出父路由的子路由。

实现

import {RouteRecordRaw} from "vue-router";

// 枚举layouts中的页面，主路由
const layouts = import.meta.globEager('../layouts/*.vue')
// 枚举views中的页面，子路由
const views = import.meta.globEager('../views/**/*.vue')

// 遍历layouts，使它形成router
function getRoutes() {
    // 空数组，用于存放结果
    const layoutRoutes = [] as RouteRecordRaw[]
    Object.entries(layouts).forEach(([file, module]) => {
        // 通过文件路径+模块，形成路由
        const route = getRouteByModule(file, module)
        // 将子路由也加进来
        route.children = getChildrenRoutes(route)
        layoutRoutes.push(route)
    })
    return layoutRoutes
}
// 遍历子路由
function getChildrenRoutes(layoutRoute: RouteRecordRaw): RouteRecordRaw[] {
    // 空数组，用于存放结果
    const children = [] as RouteRecordRaw[]
    Object.entries(views).forEach(([file, module]) => {
        // 找到是views路径的，加入到子路由中
        if (file.includes(`../views/${layoutRoute.name as string}`)) {
            const route = getRouteByModule(file, module)
            route.path = route.path.replace(/\//, '')
            children.push(route)
        }
    })
    return children
}
// 文件名转路由
function getRouteByModule(file: string, module: { [key: string]: any }) {
    // ../layouts/xxx.vue 从路径中拿到xxx
    const name = file.split('/').pop()?.split('.')[0]
    // 构造route
    const route = {
        path: `/${name}`,
        name: name,
        component: module.default
    }
    // 在页面中自定义路由优先于自动路由
    return Object.assign(route, module.default?.route)
}


export default getRoutes()

已经十分详细的注释了上面的代码，随后在路由中引入此文件

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
import {App} from "vue";
import routes from "./routes";
import layoutRoutes from "./autoload";

const router = createRouter({
    history: createWebHistory(),
    routes: [...routes, ...layoutRoutes]
})

export function setupRouter(app: App) {
    app.use(router)
}

当我们在views/admin中添加order.vue时候，自动注册了路由
http://localhost:3000/admin/order