菜单路由
前端项目基于 element-ui-admin 实现,它的 路由和侧边栏 (opens new window) 是组织起一个后台应用的关键骨架。
侧边栏和路由是绑定在一起的,所以你只有在 @/router/index.js (opens new window) 下面配置对应的路由,侧边栏就能动态的生成了,大大减轻了手动重复编辑侧边栏的工作量。
当然,这样就需要在配置路由的时候,遵循一些约定的规则。
# 1. 路由配置
首先,我们了解一下本项目配置路由时,提供了哪些配置项:
1 |
|
普通示例
1 |
|
外链示例
1 |
|
# 2. 路由
项目的路由分为两种:静态路由、动态路由。
# 2.1 静态路由
静态路由,代表那些不需要动态判断权限的路由,如登录页、404、个人中心等通用页面。
在
@/router/index.js (
opens new window) 的 constantRoutes
,就是配置对应的公共路由。如下图所示:
# 2.2 动态路由
动态路由,代表那些需要根据用户动态判断权限,并通过 addRoutes ( opens new window) 动态添加的页面,如用户管理、角色管理等功能页面。
在用户登录成功后,会触发
@/store/modules/permission.js
(
opens new window) 请求后端的菜单 RESTful API 接口,获取用户有权限
的菜单列表,并转化添加到路由中。如下图所示:
友情提示:
- 动态路由可以在 [系统管理 -> 菜单管理] 进行新增和修改操作,请求的后端 RESTful API
接口是
/admin-api/system/list-menus
( opens new window) - 动态路由在生产环境下会默认使用路由懒加载,实现方式参考 loadView ( opens new window) 方法的判断
# 2.3 路由跳转
使用 router.push
方法,可以实现跳转到不同的页面。
1 |
|
# 3. 菜单管理
项目的菜单在 [系统管理 -> 菜单管理] 进行管理,支持无限 层级,提供目录、菜单、按钮三种类型。如下图所示:
菜单可在 [系统管理 -> 角色管理] 被分配给角色。如下图所示:
# 3.1 新增目录
① 大多数情况下,目录是作为菜单的【分类】:
② 目录也提供实现【外链】的能力:
# 3.2 新增菜单
# 3.3 新增按钮
# 4. 权限控制
前端通过权限控制,隐藏用户没有权限的按钮等,实现功能级别的权限。
友情提示:前端的权限控制,主要是提升用户体验,避免操作后发现没有权限。
最终在请求到后端时,还是会进行一次权限的校验。
# 4.1 v-hasPermi 指令
v-hasPermi
(
opens new window) 指令,基于权限字符,进行权限的控制。
1 |
|
# 4.2 v-hasRole 指令
v-hasRole
(
opens new window) 指令,基于角色标识,机进行的控制。
1 |
|
# 4.3 结合 v-if 指令
在某些情况下,它是不适合使用 v-hasPermi
或 v-hasRole
指令,如元素标签组件。此时,只能通过手动设置 v-if
,通过使用全局权限判断函数,用法是基本一致的。
1 |
|
# 5. 页面缓存
由于目前
keep-alive
和 router-view
是强耦合的,而且查看 Vue 的文档和源码不难发现 keep-alive
的 include
默认是优先匹配组件的 name
,所以在编写路由 router
和路由对应的 view
component 的时候一定要确保 两者的 name 是完全一致的。
注意,切记 view component 的 name
命名时候尽量保证唯一性,切记不要和某些组件的命名重复了,不然会递归引用最后内存溢出等问题。
# 5.1 静态路由的示例
① router 路由的 name
声明如下:
1 |
|
② view component 的 name
声明如下:
1 |
|
一定要保证两者的名字相同,切记写重或者写错。默认如果不写 name
就不会被缓存,详情见 issue (opens new window)。