前端项目基于 vue-element-plus-admin 实现，它的 路由和侧边栏 (opens new window) 是组织起一个后台应用的关键骨架。
侧边栏和路由是绑定在一起的，所以你只有在 @/router/index.js (opens new window) 下面配置对应的路由，侧边栏就能动态的生成了，大大减轻了手动重复编辑侧边栏的工作量。
当然，这样就需要在配置路由的时候，遵循一些约定的规则。
1. 路由配置
首先，我们了解一下本项目配置路由时，提供了哪些配置项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
|
1.1
普通示例
注意事项：
- 整个项目所有路由
name 不能重复 - 所有的多级路由最终都会转成二级路由，所以不能内嵌子路由
- 除了
layout
对应的 path 前面需要加 /，其余子路由都不要以 / 开头
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| {
path: '/level',
component: Layout,
redirect: '/level/menu1/menu1-1/menu1-1-1',
name: 'Level',
meta: {
title: t('router.level'),
icon: 'carbon:skill-level-advanced'
},
children: [
{
path: 'menu1',
name: 'Menu1',
component: getParentLayout(),
redirect: '/level/menu1/menu1-1/menu1-1-1',
meta: {
title: t('router.menu1')
},
children: [
{
path: 'menu1-1',
name: 'Menu11',
component: getParentLayout(),
redirect: '/level/menu1/menu1-1/menu1-1-1',
meta: {
title: t('router.menu11'),
alwaysShow: true
},
children: [
{
path: 'menu1-1-1',
name: 'Menu111',
component: () => import('@/views/Level/Menu111.vue'),
meta: {
title: t('router.menu111')
}
}
]
},
{
path: 'menu1-2',
name: 'Menu12',
component: () => import('@/views/Level/Menu12.vue'),
meta: {
title: t('router.menu12')
}
}
]
},
{
path: 'menu2',
name: 'Menu2Demo',
component: () => import('@/views/Level/Menu2.vue'),
meta: {
title: t('router.menu2')
}
}
]
}
|
1.2 外链示例
只需要将
path 设置为需要跳转的 HTTP 地址即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
| {
path: '/external-link',
component: Layout,
meta: {
name: 'ExternalLink'
},
children: [
{
path: 'https:
meta: { name: 'Link', title: '芋道源码' }
}
]
}
|
2. 路由
项目的路由分为两种：静态路由、动态路由。
2.1 静态路由
静态路由，代表那些不需要动态判断权限的路由，如登录页、404、个人中心等通用页面。
在
@/router/modules/remaining.ts (
opens new window) 的 remainingRouter
，就是配置对应的公共路由。如下图所示：
2.2 动态路由
动态路由，代表那些需要根据用户动态判断权限，并通过
addRoutes (
opens new window) 动态添加的页面，如用户管理、角色管理等功能页面。
在用户登录成功后，会触发
@/store/modules/permission.ts (
opens new window) 请求后端的菜单 RESTful API 接口，获取用户有权限
的菜单列表，并转化添加到路由中。如下图所示：
2.3
路由跳转
使用 router.push 方法，可以实现跳转到不同的页面。
1
2
3
4
5
6
7
| const { push } = useRouter()
push('/job/job-log');
push('/bpm/process-instance/detail?id=' + row.processInstance.id)
|
3. 菜单管理
项目的菜单在 [系统管理 -> 菜单管理] 进行管理，支持无限
层级，提供目录、菜单、按钮三种类型。如下图所示：
菜单可在 [系统管理 -> 角色管理]
被分配给角色。如下图所示：
3.1 新增目录
①
大多数情况下，目录是作为菜单的【分类】：
②
目录也提供实现【外链】的能力：
3.2
新增菜单
3.3
新增按钮
4. 权限控制
前端通过权限控制，隐藏用户没有权限的按钮等，实现功能级别的权限。
友情提示：前端的权限控制，主要是提升用户体验，避免操作后发现没有权限。
最终在请求到后端时，还是会进行一次权限的校验。
4.1 v-hasPermi
指令
v-hasPermi (
opens new window) 指令，基于权限字符，进行权限的控制。
1
2
3
4
5
|
<el-button v-hasPermi="['system:user:create']">存在权限字符串才能看到</el-button>
<el-button v-hasPermi="['system:user:create', 'system:user:update']">包含权限字符串才能看到</el-button>
|
4.2 v-hasRole
指令
v-hasRole (
opens new window) 指令，基于角色标识，机进行的控制。
1
2
3
4
5
|
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
|
4.3 结合 v-if 指令
在某些情况下，它是不适合使用 v-hasPermi 或 v-hasRole
指令，如元素标签组件。此时，只能通过手动设置 v-if，通过使用全局权限判断函数，用法是基本一致的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <template>
<el-tabs>
<el-tab-pane v-if="checkPermi(['system:user:create'])" label="用户管理" name="user">用户管理</el-tab-pane>
<el-tab-pane v-if="checkPermi(['system:user:create', 'system:user:update'])" label="参数管理" name="menu">参数管理</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
</el-tabs>
</template>
<script>
import { checkPermi, checkRole } from "@/utils/permission";
export default{
methods: {
checkPermi,
checkRole
}
}
</script>
|
5. 页面缓存
开启缓存有 2
个条件
- 路由设置
name，且不能重复 - 路由对应的组件加上
name
，与路由设置的 name 保持一致
5.1 静态路由的示例
① router 路由的 name 声明如下：
1
2
3
4
5
6
7
8
| {
path: 'menu2',
name: 'Menu2',
component: () => import('@/views/Level/Menu2.vue'),
meta: {
title: t('router.menu2')
}
}
|
② view component 的 name 声明如下：
1
2
3
4
5
| <script setup lang="ts">
defineOptions({
name: 'Menu2'
})
</script>
|
注意：
keep-alive 生效的前提是：需要将路由的 name 属性及对应的页面的 name 设置成一样。
因为：include - 字符串或正则表达式，只有名称匹配的组件会被缓存
5.2 动态路由的示例
菜单路由
