# 路由/菜单
# 配置文件路径
系统路由配置文件：@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浏览器中打开),则应该选用特定浏览器打开指定页面.
# 配置链接参数JS处理函数
在菜单管理的新增或编辑弹窗中,可以对菜单项配置链接参数JS处理函数(目录项无法配置)。
此处配置全局方法的方法名,需保证框架可以调用到。示例代码如下:
// 如配置的方法名为linkHandler, 框架会为此方法提供一个形参menuObject.
// menuObject为要前往的路由对象,类型为object.
function linkHandler(menuObject) {
// 如此处涉及到异步请求,需将请求(promise)返回,并在resolve后返回处理结果.
return $get('/getResult').then((response)=>{
// ...对返回结果的一些处理
const result = handleParams(response)
return ({
path: result, // 此处传入要跳转的路由,若路由不变,可用原路由menuObject.path
// 如果要添加query参数,需将原路由的query及要添加的query进行合并,防止参数丢失
// 特别地,需要添加callbackConfirmed: true. 此字段为约定的固定字段,必须添加,防止跳转时的循环问题
query: Object.assign({},menuObject.query,{
customQuery1: 'query1',
customQuery2: 'query2',
callbackConfirmed: true
})
})
}).catch((error)=>{
// 传入false,不进行路由跳转
return(false)
})
}
# 全局打开菜单方法
通过hos_openMenu(menu)方法调用( 如果在iframe中进行调用,需使用window.top.hos_openMenu(menu)).
此方法支持一个参数menu,类型为string或object.
若只需要打开某个菜单,可直接传入string类型值,应为菜单的编码code字段或路径path字段. 示例代码如下:
// 如某菜单编码code:menu1
const menu = 'menu1'
hos_openMenu(menu)
若需要携带参数时,可传入object类型值. 示例代码如下:
const menuObj = {
// 此字段指定要跳转的菜单的编码.
path: 'menu1',
// query字段指定要传入的查询参数,实际会以 ?key1=value1&key2=value2的形式拼接在url地址后面.
query: {
key1: 'value1',
...,
key2: 'value2'
},
// 此字段需配合动态参数使用.如/menu/:id
parmas: {
id: 'value1',
}
}
hos_openMenu(menuObj)
# 打开菜单编辑弹窗
通过postMessage方法调用( 如果在iframe中进行调用,需使用window.top.postMessage)。
传入需要发送的消息对象,类型为object。示例代码如下:
const messageObj = {
// 此字段为固定值"editMenu".
type: 'editMenu',
// 此字段为要编辑的菜单的id,格式为string.
data: 'menuId',
}
window.top.postMessage(messageObj)
← 权限控制 页签 TabLayout →