本文介绍了如何在Vue-Admin项目中实现基于文件标记的自动路由配置，避免手动编辑路由配置文件，提高开发效率。通过在vue文件中导出路由元信息，配合目录下的routerMeta.ts文件，可以轻松创建和管理多级菜单路由。同时，文章提供了详细的配置实例，展示了自动配置相对于传统配置的便利性和简洁性。
其实笔者之前就有写过类似的文章。只是之前用于手机端路由的简单配置，而今天和之前的使用略有不同，今天需要解决的是PC后台的路由配置，而路由的菜单，是基于vue-router的方案。Vue-Admin-Beautiful和V3-Admin之类的框架都可以使用本方案实现自动路由配置。本文的环境是V3-Admin（V3-Admin-Vite 中文文档 - 掘金）
思路
基于约定大于配置的思想，我们采用路径文件扫描的方式实现自动配置。做过后端的同学就很清楚，java体系里非常著名的spring框架就采用了大量自动配置方式，给代码模块增加Annotaion注释，在配置过程中扫描具备对应注释的文件来自动配置。而在前端体系的webpack和vite都具备有相应的模式，虽然不像后端体系那样完善，但是也可以实现类似的效果。在对应文件中直接配置路由节点，更加接近对象思维，减少配置出错。但是对应的代价就是模块名称尽量做到唯一，这个只要稍微注意下一般问题不大。
来看看最终达到的效果：
1）无需配置异步路由，基于文件标记的模式，默认扫描路径/src/views，即认为views目录就是你的菜单根，下面的文件目录可以配置为多级菜单的目录节点，而目录下的模块根据是否导出配置来识别为菜单叶节点；
2）模块的标记只需给vue文件添加一个<script>块导出meta配置，该模块即自动出现在菜单路径，并可以自动识别挂载在对应的目录节点下。例如：
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: '多级菜单',
icon: 'menu',
roles: ['role11'],
position: 100
}
3）目录的标记采用在目录下添加routerMeta.ts文件，内容与模块<script>的一致，标记的目录名称即路由path；
4）剩下就没有其它事情了，根据src/views下的目录结构，菜单已经自动配置好。享受无需编辑路由配置文件的便利~
配置实战
好了，直接讲概念，大家可能还不好理解，直接来个配置实战，看看自动配置后带来的便利。
先看下配置结构，我们采用typescript来描述下配置参数，我们只关心这些，我们也只需要添加这些：
export type RouterMeta = {
title: string // 设置该路由在侧边栏、面包屑、以及顶部TAB展示的名字
icon?: string // 设置该路由的图标，记得将 svg 导入 @/icons/svg
roles?: string[] // 设置该路由进入的权限，支持多个权限叠加
position?: number // 目录或模块的排序，默认为100，同position则为字母顺序
alwaysShow?: true // 当一级路由只有一个时，是直接显示还是显示多一层目录，默认是false
hidden?: true // 如果设置hidden，则为隐藏的模块，如果作用于目录，则下级所有的节点模块都不显示
pathDefault?: true // 当前路由是否为母路由的默认节点，如果是，那么会在母路由生成redirect指向当前节点，用于面包屑跳转等
}下一步还是以V3默认的多级菜单来作为配置例，唯一不同的是，子路由模板外层我们不增加任何其他内容，采用EmptyLayout.vue（VAB Admin直接会提供，V3 Admin则要自己添加一个）
<template>
<router-view />
</template>
传统模式
如果我们采用传统VUE Router配置方式，需要写这样长长的一段配置
{
path: "/menu",
component: Layout,
redirect: "/menu/menu1",
name: "Menu",
meta: {
title: "多级菜单",
icon: "menu"
},
children: [
{
path: "menu1",
component: () => import("@/views/menu/menu1/index.vue"),
redirect: "/menu/menu1/menu1-1",
name: "Menu1",
meta: { title: "menu1" },
children: [
{
path: "menu1-1",
component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
name: "Menu1-1",
meta: { title: "menu1-1" }
},
{
path: "menu1-2",
component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
redirect: "/menu/menu1/menu1-2/menu1-2-1",
name: "Menu1-2",
meta: { title: "menu1-2" },
children: [
{
path: "menu1-2-1",
component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
name: "Menu1-2-1",
meta: { title: "menu1-2-1" }
},
{
path: "menu1-2-2",
component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
name: "Menu1-2-2",
meta: { title: "menu1-2-2" }
}
]
},
{
path: "menu1-3",
component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
name: "Menu1-3",
meta: { title: "menu1-3" }
}
]
},
{
path: "menu2",
component: () => import("@/views/menu/menu2/index.vue"),
name: "Menu2",
meta: { title: "menu2" }
}
]
}解释下上面配置逻辑（顺便凑点字数）：
1）一级节点为 【多级菜单】，面包屑点击则跳转到/menu/menu1，/menu/menu1路径看子节点的配置，是指向/menu/menu1/menu1-1，而/menu/menu1/menu1-1路径再看下集节点，是指向@/views/menu/menu1/menu1-1/index.vue
2）一级节点下有【menu1-1】,【menu1-3】模块和二级节点【menu1-2】，menu2面包屑点击跳转到/menu/menu1/menu1-2/menu1-2-1，对应指向的是@/views/menu/menu1/menu1-2/menu1-2-1/index.vue
3）二级节点【menu1-2】下有【menu1-2-1】和【menu1-2-2】两个模块
自动配置
下一步我们把这个配置拿掉，换成自动配置（auto-router的代码在文末）
import autoRouter from './auto-router'
export const asyncRoutes: Array<RouteRecordRaw> = autoRouter()然后记得把404未找到的配置放到后面去push，就是这段：（一般原路由都会写，未完整贴上，也就是404的逻辑拿出来放到最后配置）
asyncRoutes.push({
path: '/:pathMatch(.*)*', // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end......然后开始配置一级，在目录/src/views/menu/menu1下建立文件routerMeta.ts
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: '多级菜单'
}
接下来1级菜单的指向，是由子节点meta的pathDefault决定，写在哪个子节点，它父节点在面包屑点击的时候就会跳转到这个子节点，一个ture代替了传统配置一段路径编写，减少出错（你可能会说，传统配置可以跳转到非子路径的其他路径啊？我只能说这种设计结构我 #/*/☆，有点正常思维吧）
修改@/views/menu/menu1/index.vue，在尾部增加代码块
<script lang="ts">
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: 'menu1-1',
pathDefault: true
}
</script>由于上级目录面包屑指向此节点，因此用pathDefault来标记
修改@/views/menu/menu3/index.vue，在尾部增加代码块
<script lang="ts">
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: 'menu1-3'
}
</script>在目录 @/views/menu/menu2下增加配置描述文件routerMeta.ts
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: 'menu1-2',
pathDefault: true
}
这样二级节点就配置完了（二级节点里目录面包屑指向在三级节点里配置）
下一步配置三级节点。同样，在 @/views/menu/menu1/menu1-2/menu1-2-1/index.vue和@/views/menu/menu1/menu1-2/menu1-2-2/index.vue文件里增加分别路由描述内容
<script lang="ts">
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: 'menu1-2-1'
}
</script>和
<script lang="ts">
import { RouterMeta } from '@/router/auto-router'
export const routerMeta: RouterMeta = {
title: 'menu1-2-2'
}
</script>对比传统配置，总的代码量看上去少不了多少，但是我们发现自动配置后我们除了关心title和pathDefault目录默认跳转以外不用写任何路径，byebye了json的嵌套地狱。一切都会自动配置好，避免出错，提高效率。
而删除则更方便，直接文件或目录删除，对应路由节点就没了不用额外管配置文件。
核心代码
好了，最后放出实现这神奇功能的代码段，放到@/router/auto-router.ts
/**
* 基于vite路径扫描的Router自动配置
* @author Jim
*/
import { RouteRecordRaw } from 'vue-router'
const BaseLayout = () => import('@/layout/index.vue')
const EmptyLayout = () => import('@/layout/EmptyLayout.vue')
export type RouterMeta = {
title: string // 设置该路由在侧边栏、面包屑、以及顶部TAB展示的名字
icon?: string // 设置该路由的图标，记得将 svg 导入 @/icons/svg
roles?: string[] // 设置该路由进入的权限，支持多个权限叠加
position?: number // 目录或模块的排序，默认为100，同position则为字母顺序
alwaysShow?: true // 当一级路由只有一个时，是直接显示还是显示多一层目录，默认是false，对以及目录配置有效
hidden?: true // 如果设置hidden，则为隐藏的模块，如果作用于目录，则下级所有的节点模块都不显示
pathDefault?: true // 当前路由是否为母路由的默认节点，如果是，那么会在母路由生成redirect指向当前节点，用于面包屑跳转等
}
const config: () => Array<RouteRecordRaw> = () => {
const scanResult: Record<string, any> = import.meta.globEager('../views/**/(*.vue|routerMeta.ts)')
const dirNodes: Record<string, any> = {}
const workList = []
for (const key in scanResult) {
if (scanResult[key].routerMeta) {
let dirPath = key
let name = ''
const isDirectory = key.endsWith('routerMeta.ts')
dirPath = dirPath.substring(0, dirPath.lastIndexOf('.'))
if (dirPath.endsWith('/index') || isDirectory) {
dirPath = dirPath.substring(0, dirPath.lastIndexOf('/'))
}
name = dirPath.substring(dirPath.lastIndexOf('/') + 1, dirPath.length)
dirPath = dirPath.substring(8, dirPath.lastIndexOf('/'))
const node = {
parent: null,
dirPath: dirPath, // 所在的目录
name: name,
isDirectory: isDirectory,
filePath: key, // 文件位置
meta: scanResult[key].routerMeta, // 描述
children: []
}
workList.push(node)
if (isDirectory) {
dirNodes[dirPath + '/' + name] = node
}
}
}
// 构建目录结构
Object.values(dirNodes).forEach((node: any) => {
const parent = dirNodes[node.dirPath]
if (parent) {
parent.children.push(node)
node.parent = parent
}
})
// 挂载模块
workList.forEach((node: any) => {
if (!node.isDirectory) {
const parent = dirNodes[node.dirPath]
if (parent) {
parent.children.push(node)
node.parent = parent
}
}
})
// 完善对象 & 排序
const visit = (nodeList: any[]) => {
// 处理排序
nodeList.sort((a: any, b: any) => {
let aPosition = 100
if (typeof a.meta?.position === 'number') {
aPosition = a.meta?.position
}
let bPosition = 100
if (typeof b.meta?.position === 'number') {
bPosition = b.meta?.position
}
return aPosition - bPosition
})
nodeList.forEach(node => {
// 处理redirect
let redirect
node.children.forEach((childNode: any) => {
if (childNode.meta.pathDefault) {
redirect = `${childNode.dirPath}/${childNode.name}`
}
})
if (redirect) {
node.redirect = redirect
}
if (!node.path) {
node.path = node.name
}
node.name = node.name.slice(0, 1).toUpperCase() + node.name.slice(1)
if (!node.component) {
if (node.isDirectory) {
node.component = EmptyLayout
} else {
node.component = () => import(/* @vite-ignore */ node.filePath)
}
}
if (node.children.length > 0) {
visit(node.children) // 递归处理
} else {
delete node.children
}
})
}
// 抽离并完善一级节点
const result: Array<RouteRecordRaw> = workList
.filter(node => {
return node.dirPath === ''
})
.map((node: any) => {
if (!node.component) {
node.component = BaseLayout
}
node.path = '/' + node.name
return node
})
visit(result)
console.log(result)
return result
}
export default config
然后最后说明3个问题：
1）一级节点要实现模块跳转，只能在上面添加一个目录节点，当然有兴趣也可以自行去完善；
2）由于采用的是文件名扫码，节点的排序默认会以文件名字符来进行排序，你可以在meta描述里指定position来控制位置，如果不指定，等同于position=100，相同position内以文件名称来进行排序
3）hidden可直接用于目录描述文件，那么下级所有的子模块都是隐藏的。即不出现在菜单
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
