路由与菜单导航

后台页面的 菜单导航 各页面路由 每个页面的内容 页面跳转 菜单权限 面包屑 等都可以通过 Router block 配置

详细api参考：Router 导航路由

配置示例

  1. {
  2.     type: 'router',
  3.     data: {
  4.         roles: ['admin']
  5.     },
  6.     router: {
  7.         // defaultBreadcrumb: false, //是否将第一个菜单作为“首页”一直出现在面包屑，默认为 true
  8.         // mode: 'history', // 配置路由模式，默认为 hash，可选值: "hash" | "history"
  9.         // base: '/app/', // 要在history模式下才会发挥作用
  10.         routes: [
  11.             {
  12.                 name: '首页',
  13.                 path: '',
  14.                 redirect: '/list',
  15.                 meta: {
  16.                     icon: 'menu'
  17.                 }
  18.             },
  19.             {
  20.                 name: '404',
  21.                 path: '404',
  22.                 block: '404',
  23.                 meta: {
  24.                     hasMenu: false,
  25.                     hidden: true
  26.                 }
  27.             },
  28.             {
  29.                 name: '列表',
  30.                 path: 'list',
  31.                 block: 'list',
  32.                 meta: {
  33.                     roles: ['admin', 'edit'],
  34.                     icon: 'document'
  35.                 },
  36.                 children: [
  37.                     {
  38.                         name: '编辑',
  39.                         path: 'edit',
  40.                         block: 'formEdit'
  41.                     },
  42.                     {
  43.                         meta: {
  44.                             roles: ['admin'， 'view']
  45.                         },
  46.                         name: '查看',
  47.                         path: 'view',
  48.                         block: 'formView'
  49.                     }
  50.                 ]
  51.             },
  52.             {
  53.                 name: '外链',
  54.                 meta: {
  55.                     icon: 'star-off'
  56.                 },
  57.                 path: 'http://w3cmark.com'
  58.             },
  59.             {
  60.                 name: '跳404',
  61.                 redirect: '404',
  62.                 meta: {
  63.                     icon: 'error'
  64.                 }
  65.             },
  66.             {
  67.                 path: '*',
  68.                 redirect: '404'
  69.             }
  70.         ]
  71.     }
  72. }

example

菜单导航和路由地址

菜单导航和路由地址是根据 router.routes 的 route 配置嵌套配置而成

如 列表 页的页面路由为 /list 同时其渲染的block名为 list，菜单项会有一个顶层的 列表 菜单，其下有两个子菜单：编辑 和 查看，对应的页面路由为 /list/edit 和 /list/view

权限控制

每个菜单可以在meta内配置roles，需要 data.roles 有对应的权限才能看到对应的菜单，如当前权限为 edit，则无法看到 查看 页（需要具备 view 或者 admin ）

如果data.roles变更，可以调用this.initRouter()重置路由表和菜单

面包屑

面包屑会根据routes的配置自动生成，点击会跳转对应页面，如有页面不希望点击跳转，可以配置其 meta.noRedirect 为 true