# 应用编程的路由和菜单

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决定了菜单中的先后顺序。需要说明的是:

  1. icon 可以配置的值有 ElementUI图标,以及注册了的SVG文件名。
  2. 菜单的path 和 路由的path相对应, 菜单path中可以携带参数。

WARNING

其实, db-metadata-demo工程中前端部分已经展示了如何手动编写菜单和路由了。

Last Updated: 5/17/2022, 1:33:44 PM