可配置项

首先了解一些本项目配置路由时提供了哪些配置项。

  1. //当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
  2. hidden: true // (默认 false)
  4. //当设置 noredirect 的时候该路由在面包屑导航中不可被点击
  5. redirect: 'noredirect'
  7. //当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
  8. //只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
  9. //若你想不管路由下面的 children 声明的个数都显示你的根路由
  10. //你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
  11. alwaysShow: true
  13. name: 'router-name' //设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  14. meta: {
  15.   title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
  16.   icon: 'svg-name' //设置该路由的图标
  17.   noCache: true //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  18.   breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
  19. }

示例：

  1. {
  2.   path: '/permission',
  3.   component: Layout,
  4.   redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
  5.   hidden: true, // 不在侧边栏线上
  6.   alwaysShow: true, //一直显示根路由
  7.   children: [{
  8.     path: 'index',
  9.     component: ()=>import('@/views/permission/index'),
  10.     name: 'permission',
  11.     meta: {
  12.       title: 'permission',
  13.       icon: 'lock', //图标
  14.       noCache: true // 不会被 <keep-alive> 缓存
  15.     }
  16.   }]
  17. }

添加图标

如果你没有在本项目 Icon 中找到需要的图标，可以到 iconfont.cn 上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到 src/icons/svg 文件夹之中就可以了，下载方式如下图：

系统菜单 - 图1

使用方式：

  1. <svg-icon icon-class="password" /> //icon-class 为 icon 的名字

添加菜单

本项目支持菜单动态路由，支持添加4级菜单，支持外链，支持自定义图标，这里演示动态添加菜单（1.6版本后就不支持在菜单管理中选择角色了，而是在角色管理中分配菜单）

(1) 添加外链

系统菜单 - 图2

(2) 添加内部菜单

组件路径为 src/views

添加内部菜单组件路径对应
系统菜单 - 图3系统菜单 - 图4
(3) 添加多级菜单

添加多级菜单请模仿项目内的多级菜单进行添加

系统菜单 - 图5