菜单表主要为sys_permission 以下是查询菜单的语句
1. SELECT 2. id, 3. parent_id, 4. NAME, 5. perms, 6. perms_type, 7. icon, 8. component, 9. component_name, 10. url, 11. redirect, 12. sort_no, 13. menu_type, 14. is_leaf AS leaf, 15. is_route AS route, 16. keep_alive, 17. description, 18. create_by, 19. del_flag, 20. rule_flag, 21. hidden, 22. create_time, 23. update_by, 24. update_time, 25. STATUS, 26. always_show 27. FROM 28. sys_permission 29. WHERE 30. del_flag = 0 31. ORDER BY 32. sort_no ASC
字段名称 | 说明 |
菜单类型 | 一级菜单:配置一级菜单;子菜单:配置下级菜单;按钮:配置页面按钮权限 |
菜单名称 | 定义菜单名称 |
上级菜单 | 菜单类型为子菜单时,选择关联的上级菜单 |
菜单路径 | 定义菜单的路径,通常为:/包名/文件名 具体参见【菜单路径配置说明】 |
前端组件 | 定义菜单访问的组件名称,有两种类型,一种为通用组件,一种为具体的页面, |
具体参见【前端组件配置说明】 | |
菜单图标 | 菜单树展示的图标 |
排序 | 菜单展示的先后顺序 |
是否路由 | 此处很重要,默认是路由;如果是非的话,访问404 |
隐藏路由 | 不展示为菜单,但是在页面中跳转,弹出的页面路由菜单 |
聚合路由 | 多个下级菜单路由在一个页面聚合展示 |
前端组件配置说明:
- 1、非叶子菜单(即没有下级的菜单)配置固定 前端组件layouts/RouteView
- 2、普通的叶子菜单(即具体的页面) 配置相对于src/views目录的路径
例如src/views/jeecg/helloworld.vue 这个页面(具体参考底部截图) 配置菜单时 前端组件为 jeecg/helloworld - 3、需要跳转到第三页面的菜单 前端组件固定为:layouts/IframePageView(具体参考底部截图)
(比如跳转百度:https://www.baidu.com) - 4、java后台请求的菜单
需要以{{ window._CONFIG['domianURL'] }}开头(具体参考底部截图)
菜单路径配置说明
- 1、非叶子菜单(即没有下级的菜单),URL配置规则:按照功能模块定义的关键根路径即可,不能重复,需以“/”开头
- 2、普通的叶子菜单(即具体的页面),URL和前端组件配置保持一致即可,需在前端组件值前加“/”
- 3、需要跳转到第三方页面的菜单,菜单路径配置第三方跳转的地址即可,例如http://www.baidu.com
参考示例:
[2].菜单的路由类型设置为非路由(很重要)
第二部分:具体菜单配置 [1]. 把URL的动态参数:code,改成具体值 例如:
/online/cgreport/87b55a515d3441b6b98e48e5b35474a6
- 1.路由菜单配置截图
- 2.外部链接菜单
- 3.后台链接菜单
- 路由菜单规则
菜单配置就是配置前端所需要的路由 菜单路径 : 对应页面访问请求URL (系统唯一,不能有重复URL) 前端组件 : 对应前端页面组件(路径+名字,无.vue后缀)
- 路由name取值规则:
1. 通过菜单URL,生成路由name(去掉URL前缀斜杠,替换内容中的斜杠‘/’为-) 2. 举例: URL = /account/settings/base 3. RouteName = account-settings-base
- 前端页面跳转用法:
1. <router-link :to="{ name: 'account-settings-base' }"> 2. 基本设置 3. </router-link>
- 带参数路由菜单如何配置?
什么是带参数菜单? 就是菜单URL是动态的,带有参数,根据参数不同页面不同的渲染效果。
- 目前JEECG已经实现了此功能,具体配置可以参考Online报表: 此配置分两部分:
第一部分: 动态路由的配置(路由) 第二部分: 具体菜单配置(非路由)
第一部分:动态路由的配置 - 菜单URL示例:
/online/cgreport/:code
- 菜单类型是否路由: 选择是