# 应用编程的路由和菜单
DbMeta建议路由和菜单数据都动态维护。但你也可以用熟悉的方式手动编写。
# 手动编写路由
这个没啥说的, VueRouter实例都是你创建并提供给DbMeta的,原来怎么写路由数据,你仍然怎么写。需要注意的是路由配置中的meta属性。
DbMeta支持的meta属性如下:
{
"meta": {
"title": "路由1-1",
"order": 1,
"disable": false,
"need_permit": true,
"permit_by": "auth",
"auths": ["xxx"],
"roles": ["yyy"],
"auth_match_mode": "any",
"role_match_mode": "any",
"noCache": false
}
}
# 路由的meta数据
title: 路由中文名, 显示在tag上order: 排序, 路由数据在装配时会进行排序,order越小优先级越高。这对于星号(*)的404页面非常有用,因此内置404路由的order非常大。disable: 禁用, 禁用的路由不会被装配到router中。注意: 对于编程路由而言,这个属性无效(因为已经注册进去了)。只对动态路由数据有效。need_permit: 是否需要鉴权。若为false, 则路由裸奔。若未配置,则依据是否配置了auths或roles是否为空来判断是否需要鉴权。因此,若鉴权依据是权限, 那你可以直接只提供一个auths数组即可。permit_by: need_permit为true时生效。表示鉴权的依据。可选值为: auth/role。auths: 访问此路由需要的权限编码数组(permit_by为auth时生效)。roles: 访问此路由需要的角色编码数组(permit_by为role时生效)。auth_match_mode: 权限匹配模式。可选值: any/all。 any表示任意匹配; all表示完全匹配。role_match_mode: 角色匹配模式。可选值: any/all。 any表示任意匹配; all表示完全匹配。noCache: 不缓存。默认为false, 即需要缓存。当从tag中切换时, 有时我们不希望页面刷新, 就需要设置noCache为false。
# 手动编写菜单
通过前端配置中的menus配置项,将编码的菜单传递进去。
下面是一个菜单的样例:
[
{
"path": "/route1",
"title": "编程菜单",
"icon": "el-icon-menu",
"hidden": false,
"disable": false,
"order": 1,
"need_permit": false,
"children": [
{
"path": "/route1-1",
"title": "禁用的编程菜单",
"icon": "el-icon-menu",
"hidden": false,
"disable": true,
"order": 0,
"need_permit": false
},
{
"path": "/route1-2",
"title": "可用的编程菜单",
"icon": "el-icon-menu",
"hidden": false,
"disable": false,
"order": 1
}
]
}
]
将上面这个数组传递到前端配置中的menus项即可。
配置项见名知意。鉴权相关的配置和路由上的含义一致,order决定了菜单中的先后顺序。需要说明的是:
icon可以配置的值有 ElementUI图标,以及注册了的SVG文件名。- 菜单的path 和 路由的path相对应, 菜单path中可以携带参数。
WARNING
其实, db-metadata-demo工程中前端部分已经展示了如何手动编写菜单和路由了。