Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

2 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. 路由/菜单说明
  2. ====
  3. 配置文件路径
  4. ----
  5. `@/config/router.config.js`
  6. 格式和说明
  7. ----
  8. ```javascript
  9. /**
  10. * 路由配置说明:
  11. * 建议:sider menu 请不要超过三级菜单,若超过三级菜单,则应该设计为顶部主菜单 配合左侧次级菜单
  12. *
  13. **/
  14. {
  15. redirect: noredirect,
  16. name: 'router-name',
  17. hidden: true,
  18. meta: {
  19. title: 'title',
  20. icon: 'a-icon',
  21. keepAlive: true,
  22. hiddenHeaderContent: true,
  23. }
  24. }
  25. ```
  26. `{ Route }` 对象
  27. | 参数 | 说明 | 类型 | 默认值 |
  28. | -------- | ----------------------------------------- | ------- | ------ |
  29. | hidden | 控制路由是否显示在 sidebar | boolean | falase |
  30. | redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
  31. | name | 路由名称, 建议设置,且不能重名 | string | - |
  32. | meta | 路由元信息(路由附带扩展信息) | object | {} |
  33. `{ Meta }` 路由元信息对象
  34. | 参数 | 说明 | 类型 | 默认值 |
  35. | ------------------- | ------------------------------------------------------------ | ------- | ------ |
  36. | title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
  37. | icon | 路由在 menu 上显示的图标 | string | - |
  38. | keepAlive | 缓存该路由 | boolean | false |
  39. | hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false |
  40. | permission | 与项目提供的权限拦截匹配的权限,如果不匹配,则会被禁止访问该路由页面 | array | [] |
  41. 路由例子
  42. ----
  43. ```ecmascript 6
  44. const asyncRouterMap = [
  45. {
  46. path: '/',
  47. name: 'index',
  48. component: BasicLayout,
  49. meta: { title: '首页' },
  50. redirect: '/dashboard/analysis',
  51. children: [
  52. {
  53. path: '/dashboard',
  54. component: Layout,
  55. name: 'dashboard',
  56. redirect: '/dashboard/workplace',
  57. meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
  58. children: [
  59. {
  60. path: '/dashboard/analysis',
  61. name: 'Analysis',
  62. component: () => import('@/views/dashboard/Analysis'),
  63. meta: {title: '分析页', permission: ['dashboard']}
  64. },
  65. {
  66. path: '/dashboard/monitor',
  67. name: 'Monitor',
  68. hidden: true,
  69. component: () => import('@/views/dashboard/Monitor'),
  70. meta: {title: '监控页', permission: ['dashboard']}
  71. },
  72. {
  73. path: '/dashboard/workplace',
  74. name: 'Workplace',
  75. component: () => import('@/views/dashboard/Workplace'),
  76. meta: {title: '工作台', permission: ['dashboard']}
  77. }
  78. ]
  79. },
  80. // result
  81. {
  82. path: '/result',
  83. name: 'result',
  84. component: PageView,
  85. redirect: '/result/success',
  86. meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
  87. children: [
  88. {
  89. path: '/result/success',
  90. name: 'ResultSuccess',
  91. component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
  92. // 该页面隐藏面包屑和页面标题栏
  93. meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
  94. },
  95. {
  96. path: '/result/fail',
  97. name: 'ResultFail',
  98. component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
  99. // 该页面隐藏面包屑和页面标题栏
  100. meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
  101. }
  102. ]
  103. },
  104. ...
  105. ]
  106. },
  107. ]
  108. ```
  109. > 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
  110. > 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
  111. > 3. `permission` 可以进行自定义修改,只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
  112. 附权限路由结构:
  113. ![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)