菜单配置
在/src/menus.js
文件中配置菜单数据,前端硬编码或异步加载菜单数据。
菜单特性
为了简化开发,让开发着专注于业务逻辑,系统对菜单进行了一些封装。
- 菜单支持头部、左侧、头部+左侧三种布局方式,详见导航布局;
- 系统会基于路由path自动选中对应的菜单;
- 无菜单对应的二级页面也可以选中相应父级菜单,详见系统路由;
- 左侧菜单会自动滚动到可视范围内;
- 左侧菜单支持展开收起、拖拽改变宽度
- 页面标题、tab标签页标题、面包屑基于菜单状态自动生成,但也提供了对应的修改方式,详见页面开发;
- 通过菜单配置,支持内嵌iframe打开页面、a标签方式打开页面;
菜单字段说明
开发人员可以根据自己的需要,配置所需字段。
字段 | 必须 | 说明 |
---|---|---|
key | 是 | 需要唯一 |
parentKey | 否 | 用于关联父级 |
path | 是 | 菜单对应的路由地址 |
text | 是 | 如果local对应的文案有效,将覆盖text,否则菜单默认使用text作为展示内容 |
icon | 否 | 菜单图标配置 |
url | 否 | 菜单对应会打开url对应的iframe页面,如果配置了url,path将无效 |
target | 否 | 配合url使用,菜单将为a标签 <a href={url} target={target}>{text}</a> |
local | 否 | 国际化配置,系统在i18n.menu中获取对应的文案 |
order | 否 | 菜单排序,数值越大越靠前显示 |
type | 否 | 如果菜单数据中携带功能权限配置,type==='1' 为菜单,type==='2'为功能 |
code | 否 | 功能码,如果是type==='2',会用到此字段 |