Vue3+ts实现自动注册路由

前言

在开发项目的时候，每增加一个页面，我们都需要手动的添加路由，这就很麻烦。自动注册路由就解决了这个烦恼；有了自动注册路由，我们只需要新建页面，不再需要手动的添加路由，路由就可以自动生成

实现

我们想自动生成的路由结构如下：

{
	path: '',
	name: '',
	component: () => import(''),
	children: [
		{
			path: '',
			name: '',
			component: () => import('')
		},
		{
			path: '',
			name: '',
			component: () => import('')
		}
	]
}

由上面想生成的路由结构可以看出来，不同的页面有可能对应不同的布局，所以我们需要创建布局文件夹layouts，里面存放不同的布局；不同的布局文件里面有可能存在子路由，也就是上面的children。所以我们只需要动态的或许布局路由和布局路由对应的子路由就可以了。

为了使得页面（子路由）和layouts对应起来，我们采用这样的方法：比如在layouts文件夹下存在一个admin的布局文件，那么我们需要在view页面下创建一个admin的文件夹，然后在admin文件夹下新建页面（子路由），效果如下：


上述我们在admin布局下新建了一个user页面，在member布局下新建了一个mail页面

代码

1. layouts/admin.vue

<template>
  <h1>admin.vue</h1>
  <router-view />
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

layouts/member.vue的代码和layouts/admin.vue类似，按自己的需求来

2. 自动注册路由代码

import { RouteRecordRaw } from "vue-router"

const layouts = import.meta.glob('../layouts/*.vue', { eager: true })
const views = import.meta.glob('../views/**/*.vue', { eager: true }) // **的意思是能够遍历到子目录 {eager: true} 为直接引入，不写{eager: true}是动态引入
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) {
    // console.log(layoutRoute)
    const routes = [] as RouteRecordRaw[]
    Object.entries(views).forEach(([file, module]) => {
        if (file.includes(`../views/${layoutRoute.name as string}`)) {
            const route = getRouteByModule(file, module)
            routes.push(route)
        }
    })
    return routes
}
// 获取布局路由
function getRouteByModule(file: string, module: { [key: string]: any }) {
    // console.log(file.split('/').pop()?.split('.')[0])
    // console.log(file.match(/\.\.\/layouts\/(?<name>.+)?\.vue/i)?.groups?.name)
    // console.log(file.replace(/.+layouts\/|\.vue/gi, ''))
    const name = file.replace(/.+layouts\/|.+views\/|\.vue/gi, '')
    const route = {
        path: `/${name}`,
        name: name.replace('/', '.'),
        component: module.default,
    } as RouteRecordRaw

    // return route
    return Object.assign(route, module.default?.route)
}

export default getRoutes()

3.在我们创建的router文件夹下的index.ts中使用

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

const router = createRouter({
    history: createWebHistory(),
    routes: [ 
    	{
        	path: "/",
        	name: 'home',
        	component: () => import("@/views/home.vue")
    	}, 
    	...layoutRoutes
    ]
});

结束

这样就实现了路由的自动注册