路由使用

路由配置

//当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
hidden: true; // (默认 false)

//当设置 noredirect 的时候该路由在面包屑导航中不可被点击
redirect: "noredirect";

// 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
// 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
// 若你想不管路由下面的 children 声明的个数都显示你的根路由
// 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
alwaysShow: true

name: "router-name"; //设定路由的名字，名称要保持小写这样保证<keep-alive>才会生效
meta: {
  title: "title", //设置该路由在侧边栏和面包屑中展示的名字
  titleKey: '', //国际和翻译key值，如果不为空将使用i18n
  icon: "svg-name", //设置该路由的图标
  noCache: true, //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false, // 如果设置为false，则不会在breadcrumb面包屑中显示,
  affix: true // 如果设置为true，它则会固定在tags-view中(默认 false)
}

普通示例

{
  path: '/system/test',
  component: Layout,
  redirect: 'noRedirect',
  hidden: false,
  alwaysShow: true,
  meta: { title: '系统管理', icon : "system" },
  children: [{
    path: 'index',
    component: (resolve) => require(['@/views/index'], resolve),
    name: 'Test',
    meta: {
      title: '测试管理',
      icon: 'user'
    }
  }]
}

外链示例

{
  "path": "http://www.izhaorui.cn",
  "meta": { "title": "官网", "icon": "guide" }
}

修改默认首页

路径 /src/router/index.js

...
  {
    path: '',
    component: Layout,
    redirect: '/index',
    children: [
    {
      path: '/index',
      component: () => import('@/views/index'),
      name: 'Index',
      meta: { title: '首页', icon: 'dashboard', affix: true, titleKey: 'menu.home' }
    }]
  },
	...

将上面的 component 路径替换要设置成首页的组件地址

动态菜单

添加外链外链菜单路由地址必须带上 http(s)，并且外链菜单选择 是，菜单类型选择目录

内部菜单

是否外链：这个选择否
是否缓存：选择为 是 那么切换到其他菜单当前菜单会缓存
菜单状态：如果不想在左侧显示，可以选择为 否
路由地址：这个就是浏览器访问菜单的地址(对于组件名称)
组件路径：项目的组件文件的路径 src/views
权限字符：拥有该权限才可以访问改菜单/按钮
语言 key：菜单名多语言配置字符串，对于翻译路径 src/i18n(Vue3 才支持)。对于不需要多语言的此项不需要填写任何内容，系统默认已对内置功能都做了翻译，如果需要修改翻译内容请前往翻译文件下进行修改

分配菜单

添加完菜单还需要在角色管理中给角色分配菜单

在系统管理 -> 角色管理 -> 选择对应的角色 -> 更多 -> 菜单权限

权限控制

使用权限字符串 v-hasPermi

// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>

使用角色字符串 v-hasRole

// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>