前言
上一篇 讲了使用 vue-antd-admin 开发中台项目后的一些感想，并没有提到其动态路由的配置，主要是因为当时觉得其文档写的比较详细了，而且当时并没有遇到什么坑，没想到今天接了一个需求，需要开发一套消息系统，其中有一个显示全部消息的页面，我按照官方文档中的方法配置了页面路由后，发现和我想要的效果不同，其直接全屏显示了，而我需要的是显示在侧边栏菜单的右侧内容部分，于是仔细看了文档和源码后，花了亿点点时间解决了这个需求，并且产出了本篇文章。
路由与菜单
我长话短说，基本的使用一定要看官方文档，概述起来就是说，vue-antd-admin 项目也是完全依赖 vue-router 并使用其配置规则，其提供了同步、异步两种路由方案：
同步的非常简单，就是我们熟悉的vue-router 的配置, 示例代码可以看这个 src/router/config.js就不讲了；
关键是异步，首先需要本地配置路由的map 文件，也就是把所有的完整路由拆分成单个的路由配置进行注册, 文件在这里 /router/async/router.map.js
然后根据接口返回的路由配置与map 文件结合生成最终的路由，接口返回的路由格式如下
[{
router: 'root', //匹配 router.map.js 中注册名 registerName = root 的路由
children: [ //root 路由的子路由配置
{
router: 'dashboard', //匹配 router.map.js 中注册名 registerName = dashboard 的路由
children: ['workplace', 'analysis'], //dashboard 路由的子路由配置，依次匹配 registerName 为 workplace 和 analysis 的路由
},
{
router: 'form', //匹配 router.map.js 中注册名 registerName = form 的路由
children: [ //form 路由的子路由配置
'basicForm', //匹配 router.map.js 中注册名 registerName = basicForm 的路由
'stepForm', //匹配 router.map.js 中注册名 registerName = stepForm 的路由
{
router: 'advanceForm', //匹配 router.map.js 中注册名 registerName = advanceForm 的路由
path: 'advance' //重写 advanceForm 路由的 path 属性
}
]
},
{
router: 'basicForm', //匹配 router.map.js 中注册名 registerName = basicForm 的路由
name: '验权表单', //重写 basicForm 路由的 name 属性
icon: 'file-excel', //重写 basicForm 路由的 icon 属性
authority: 'form' //重写 basicForm 路由的 authority 属性
}
]
}]
复制代码重点来了，异步路由是不能覆盖所有的路由的，比如404、login 之类的页面是不需要配置到接口权限里的，所有我们需要一个基础路由配置文件，里面注册的路由都可以merge 到最终的路由配置中。
文件地址在这里 /router/async/config.async.js
官方文档中基础路由的配置使用方法如下：
const routesConfig = [
'login', //匹配 router.map.js 中注册的 registerName = login 的路由
'root', //匹配 router.map.js 中注册的 registerName = root 的路由
{
router: 'exp404', //匹配 router.map.js 中注册的 registerName = exp404 的路由
path: '*', //重写 exp404 路由的 path 属性
name: '404' //重写 exp404 路由的 name 属性
},
{
router: 'exp403', //匹配 router.map.js 中注册的 registerName = exp403 的路由
path: '/403', //重写 exp403 路由的 path 属性
name: '403' //重写 exp403 路由的 name 属性
}
]
复制代码如果按照此方法配置，最终的路由文件大概是这样子
可以看到 消息中心是和跟路由平级的，此时的效果是这样的
看来我需要把 notification 路由给添加到首页下的children 属性里，其才会在侧边栏生成新的菜单，我修改一下配置方法试试
然后发现，/首页下的children 中并没有这个路由，也就是说其并没有别merge 到一起；问题出在 路由merge 函数里，这个函数在这里 src/utils/routerUtil.js loadRoutes 中的
// loadRoutes 函数中的这行是关键
const finalRoutes = mergeRoutes(basicOptions.routes, routes)
复制代码那么看下它是怎么定义的
/**
* 合并路由
* @param target {Route[]} 本地基础路由
* @param source {Route[]} 接口异步路由
* @returns {Route[]}
*/
function mergeRoutes(target, source) {
const routesMap = {}
target.forEach(item => routesMap[item.path] = item)
source.forEach(item => {
routesMap[item.path] = item
})
return Object.values(routesMap)
}
复制代码可以看到，其是一个浅拷贝函数，同名属性会被覆盖掉，额看来我需要改造一下写一个深度拷贝函数，突然我发现 mergeRoutes 函数下紧接着就有一个定义好的 深度合并路由函数！
/**
* 深度合并路由
* @param target {Route[]}
* @param source {Route[]}
* @returns {Route[]}
*/
function deepMergeRoutes(target, source) {
// 映射路由数组
const mapRoutes = routes => {
const routesMap = {}
routes.forEach(item => {
routesMap[item.path] = {
...item,
children: item.children ? mapRoutes(item.children) : undefined
}
})
return routesMap
}
console.log(target, source)
const tarMap = mapRoutes(target)
const srcMap = mapRoutes(source)
// 合并路由
const merge = _merge(srcMap, tarMap)
// 转换为 routes 数组
const parseRoutesMap = routesMap => {
return Object.values(routesMap).map(item => {
if (item.children) {
item.children = parseRoutesMap(item.children)
} else {
delete item.children
}
return item
})
}
return parseRoutesMap(merge)
}
复制代码可以看到其是用深度优先的递归方式来进行merge 操作的； 现在我把 mergeRoutes 替换为 deepMergeRoutes 尝试下发现真的成功了！
虽然在官方文档中并没有看到这个函数的身影，但是作者显然考虑到了这种需求，这样，异步路由的方案使用起来就更方便了。
对了，官方还在 routes 的元数据属性 meta 中注入了三个属性 icon、invisible 和 page，其中 invisible 将控制其是否显示在侧边栏菜单中，这个很有用。
总结
今天通过一个具体的需求探究，介绍了 vue-antd-admin 的动态路由方案，本来我还觉得它不太好用，今天无意中发现了 deepMergeRoutes 函数，通过它本地基础路由的配置方便很多，现在看来这个异步动态路由方案还是挺不错的，点赞。