# 路由/菜单

# 配置文件路径

系统路由配置文件：@sys/router/base-router.js

业务路由配置文件：@/router/index.js

前端路由配置分为：静态路由配置和静态菜单路由配置

静态路由配置：单个路由，无需有菜单展示的。如：404页面、数据日志路由
静态菜单路由配置：以菜单形式展示的路由

# 格式和说明

/**
 * 静态路由配置说明：
 * 建议：sider menu 请不要超过三级菜单
 *
 **/
 {
  path: '/router-path',
  name: 'router-name',
  hidden: false,
  meta: {
    title: 'title',
    icon: 'a-icon',
    keepAlive: true
  }
}

{ Route } 对象

参数	说明	类型	默认值
path	路由地址, 建议设置,且不能重名	string	-
name	路由名称, 建议设置,且不能重名	string	-
redirect	重定向地址, 访问这个路由时,自定进行重定向	string	-
meta	路由元信息（路由附带扩展信息）	object	{}

{ Meta } 路由元信息对象

参数	说明	类型	默认值
title	路由标题	string	-
keepAlive	缓存该路由	boolean	false

# 静态路由例子

const bizConstantRouterMap = [
    {
        path: '/404',
        component: () => import(/* webpackChunkName: "fail" */ '@base/views/exception/404')
    }, {
        path: '/staffB',
        name: 'staffB',
        component: () => import('@components/layouts/TabLayout'),
        children: [
            {
                path: 'index',
                name: 'StaffManage',
                meta: {
                    title: '账号管理',
                    keepAlive: true
                },
                component: () =>
                    import(/* webpackChunkName: "index" */ '@/views/staff/index'),
            },
        ]
    },
]

请注意 component: () => import('..') 方式引入路由的页面组件为懒加载模式。具体可以看 Vue 官方文档 (opens new window)

路径中的 @ 为配置的路径别名,表示 biz 业务模块路径。系统模块路径别名为 @sys

# 权限路由

# bizConstantMenuMap-菜单路由格式


    // 顶级菜单路由
    {
        "id": "11c164128ca54fb62a3a2b18104d37d1",
        "code": "staff1",
        "name": "员工管理",
        "type": "M",
        "router": '/staff/index',
        "openType": "0",
        "visible": true,
        "oneMenu": true,
        "category": 'biz',
        "cached": false,
    }
    
    // 带目录的菜单路由
    {
      "id": "11c164128ca54fb62a3a2b18104d37d1",
      "code": "iam/system",
      "name": "系统管理",
      "type": "C",
      "router": "",
      "openType": "0",
      "frame": false,
      "cached": true,
      "visible": true,
      "icon": "el-icon-s-operation",
      "pageProperties": null,
      "advancedJs": null,
      "oneMenu": true, 
      "category": 'biz',
      "children": [{
          "id": "b6e4bf6870105f2fea088482443b5a3c",
          "code": "iam/base",
          "name": "机构人员",
          "type": "C",
          "router": "",
          "openType": "0",
          "frame": false,
          "cached": true,
          "visible": false,
          "icon": "el-icon-s-custom",
          "pageProperties": null,
          "advancedJs": null,
          "oneMenu": false,
          "category": 'biz',
          "children": [{
              "id": "fb8bfc2d72125cf2e5f78cc306be4126",
              "code": "iam/institution",
              "name": "机构管理",
              "type": "M",
              "router": "/sys/institution",
              "openType": "1",
              "frame": false,
              "cached": true,
              "visible": false,
              "icon": "el-icon-s-unfold",
              "pageProperties": "height=800, width=60, top=20, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no",
              "advancedJs": "userAgent.indexOf('Firefox') > -1",
              "oneMenu": false,
              "category": 'biz',
          }]
      }]
    }

# 说明

参数	说明	类型	对应路由字段
id	后端菜单id	boolean	-
code	菜单唯一标识	string	route.path
name	菜单名称	string	meta.title
type	类型 C: 菜单; M: 目录	string	-
categoryLocation	位置 right-top: 右上角 left: 左侧	string	-
router	路由地址/链接地址	string	当为路由地址时对应 route.component,当为链接地址时存放在 meta.url中
openType	打开方式 0: tab页打开 1: 新开窗口打开 2: tab页打开iframe 3:弹窗打开	string	-
frame	是否为外链 (当为true时router为链接地址, 为false时router为路由地址)	boolean	-
cached	是否缓存	boolean	meta.keepAlive
visible	是否不显示在菜单	boolean	route.hidden
icon	菜单图标	string	meta.icon
pageProperties	新开窗口打开时的窗口配置	string	meta.pageProperties
advancedJs	路由跳转时执行的js	string	meta.advancedJs
oneMenu	是否为顶级目录或菜单	boolean	route.oneMenu
category	路由所属模块 (biz: 业务; sys: 系统)	string	-

# 后端菜单转为前端路由代码地址

@sys/utils/router/router.js

# 全局路由守卫

路由守卫就是路由跳转的一些验证，比如登录鉴权等

# 配置文件路径

src/permission.js 前置守卫：beforeEach 后置钩子：afterEach

← 权限控制国际化 →