菜单路由

前端项目基于 Vben Admin 5.x 实现，它已经内置了路由、菜单、权限等功能。

官方文档

强烈建议先阅读 Vben Admin 官方文档，了解框架的基础概念和使用方式：

• 《路由和菜单》
• 《权限》 【项目采用“后端访问控制”】

1. 路由

项目的路由分为两种：静态路由、动态路由。

1.1 静态路由

静态路由，是指在前端代码中直接定义的路由，不依赖后端接口返回。适用于一些固定的页面，如首页、个人中心等。

静态路由文件位于 src/router/routes/modules 目录下： | 路由模块 | antd 版本 | ele 版本 | | 首页 | dashboard.ts | dashboard.ts | | 系统管理 | system.ts | system.ts | | 基础设施 | infra.ts | infra.ts | | AI 大模型 | ai.ts | ai.ts | | 工作流程 | bpm.ts | bpm.ts | | CRM 系统 | crm.ts | crm.ts | | 商城系统 | mall.ts | mall.ts | | 会员系统 | member.ts | member.ts | | 支付系统 | pay.ts | pay.ts |

1.2 动态路由

动态路由，代表那些需要根据用户动态判断权限，并通过 addRoutes 动态添加的页面，如用户管理、角色管理等功能页面。

在用户登录成功后，会触发 @/store/auth.ts 的 fetchUserInfo 方法，请求后端的菜单 RESTful API 接口，获取用户有权限的菜单列表，并存储到 accessStore 中。

之后，@/router/access.ts 的 generateAccess 方法，会将菜单转化为路由并动态添加。

友情提示：

• 动态路由可以在 [系统管理 -> 菜单管理] 进行新增和修改操作，请求的后端 RESTful API 接口是 /admin-api/system/auth/get-permission-info
• 动态路由使用 import.meta.glob 实现路由懒加载，参考 @/router/access.ts 中的 pageMap 定义

1.3 路由跳转

使用 useRouter 的 push 方法，可以实现跳转到不同的页面。

import { useRouter } from 'vue-router';

const { push } = useRouter();

// 方式一：使用 path 跳转
push('/system/user');

// 方式二：使用 path 跳转，并设置 query 参数
push('/bpm/process-instance/detail?id=' + row.processInstance.id);

// 方式三（推荐）：使用 name 跳转，并设置 query 参数
push({ name: 'BpmProcessInstanceDetail', query: { id: row.processInstance.id } });

推荐使用 name 方式跳转，因为 path 方式在路由路径变更时需要同步修改，而 name 方式更加稳定。

2. 菜单管理

项目的菜单在 [系统管理 -> 菜单管理] 进行管理，支持无限层级，提供目录、菜单、按钮三种类型。如下图所示：

菜单可在 [系统管理 -> 角色管理] 被分配给角色。如下图所示：

2.1 新增目录

① 大多数情况下，目录是作为菜单的【分类】：

② 目录也提供实现【外链】的能力：

注意，默认会在【新窗口】打开外链接！如果希望通过 iframe 内嵌打开，则可以在外链拼接上 ?_iframe 参数即可。

2.2 新增菜单

注意，“路由地址”可以通过 ? 拼接查询参数 ，实现传递参数的功能。

2.3 新增按钮

3. 权限控制

前端通过权限控制，隐藏用户没有权限的按钮等，实现功能级别的权限。

友情提示：前端的权限控制，主要是提升用户体验，避免操作后发现没有权限。

最终在请求到后端时，还是会进行一次权限的校验。

更多可阅读 《权限》 的「按钮细粒度控制」。

另外，项目的 TableAction 组件的 auth 属性，可进行按钮级别的权限控制。示例如下：

• 实战案例（antd）：apps/web-antd/src/views/system/post/index.vue
• 实战案例（ele）：apps/web-ele/src/views/system/post/index.vue

4. 页面缓存

开启缓存时，需要将 keepAlive 设置为 true，如下所示：

友情提示：页面缓存是什么？

简单来说，Tab 切换时，开启页面缓存的 Tab 保持原本的状态，不进行刷新。

详细可见 Vue 文档 —— KeepAlive

4.1 静态路由的示例

router 路由的 keepAlive 声明如下：

{
  path: '/system/notify-message',
  component: () => import('#/views/system/notify/my/index.vue'),
  name: 'MyNotifyMessage',
  meta: {
    title: '我的站内信',
    icon: 'ant-design:message-filled',
    keepAlive: true, // 开启页面缓存
  },
}

4.2 动态路由的示例