# 路由/菜单

# 配置文件路径

系统路由配置文件：@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

# 框架中如何嵌入His页面

通过在系统管理--菜单管理中进行配置,可将His页面嵌入在框架中. 配置项如下图所示:

其中编码为此菜单的路由,如需通过/menu1访问此页面,此处编码需配置为menu1.加载类型需配置为非vue组件.
此处路由项第一处的下拉选择框仅针对加载类型为vue组件的选项.若加载类型为非vue组件,此选项不影响最终配置结果.
第二处输入框部分应输入该html文件的相对路径,如../example/test.html. 如需隐藏菜单,可将是否可见项关闭.
新增菜单完成后,在系统管理--权限管理--角色管理中,对此菜单进行授权即可.
以上配置完成后,即可通过菜单,打开His页面.

# 在His中嵌入框架中的页面

通过iframe标签将此页面引入.iframe标签的src属性,填写此页面的完整地址即可引入该页面.
此种情况可能需要设置免密登录.关于免密登录的相关配置请参考免密认证源登录.
注意事项: 引入的页面如果有浏览器要求(如只能在Chrome浏览器中打开或者只能在IE11浏览器中打开),则应该选用特定浏览器打开指定页面.

iframe1

iframe2

← 权限控制国际化 →