路由菜单

在本框架中，路由配置是核心功能之一，它决定了应用的菜单结构和页面访问权限。本文档将详细介绍如何在前端模式（accessMode='frontend'）下配置路由。

权限模式概述

框架支持三种权限模式：

前端权限模式 (frontend)：权限控制完全由前端处理，适用于演示和简单项目
后端权限模式 (backend)：权限控制由后端返回的菜单数据决定，适用于生产环境
混合权限模式 (mixed)：结合前端和后端权限控制

本文档主要介绍前端权限模式的配置方式。

路由配置结构

路由配置文件位于 src/router/routes/modules/ 目录下，每个业务模块对应一个路由配置文件。

基本路由配置示例

import type { RouteRecordRaw } from 'vue-router';

import { BasicLayout } from '#/layouts';

const routes: RouteRecordRaw[] = [
  {
    component: BasicLayout,
    meta: {
      icon: 'ant-design:setting-outlined',
      keepAlive: true,
      order: 1000,
      title: '系统设置',
      perms: ['admin', 'sys:manager'],
      component: 'BasicLayout',
    },
    name: 'sys:manager',
    path: '/sys/manager',
    children: [
      {
        meta: {
          icon: 'ant-design:user-outlined',
          title: '用户管理',
          order: 10,
          perms: ['admin', 'sys:user'],
          component: '/sys/user/index',
          btns: {
            'sys:user:page': '分页查询用户',
            'sys:user:detail': '查看用户详情',
            'sys:user:save': '添加用户',
            'sys:user:update': '修改用户',
            'sys:user:remove': '删除用户',
          },
        },
        name: 'sys:user',
        path: '/sys/user/index',
        component: () => import('#/views/sys/user/index.vue'),
      },
    ],
  },
];

export default routes;

路由配置字段说明

顶层路由配置（Layout）

字段	类型	必填	说明
component	Component	是	布局组件，通常为 BasicLayout
meta	Object	是	路由元信息
name	string	是	路由名称，需全局唯一
path	string	是	路由路径
children	RouteRecordRaw[]	是	子路由列表

meta 配置项

字段	类型	必填	说明
icon	string	否	菜单图标，使用ant-design图标名称
keepAlive	boolean	否	是否缓存页面
order	number	否	菜单排序，数值越小越靠前
title	string	是	菜单标题
perms	string[]	否	权限标识，用于控制菜单访问权限
component	string	否	组件路径，用于菜单同步
btns	Object	否	按钮权限列表，key为权限标识，value为按钮描述

子路由配置（页面）

字段	类型	必填	说明
meta	Object	是	路由元信息
name	string	是	路由名称，需全局唯一
path	string	是	路由路径
component	Component	是	页面组件，使用动态导入

权限控制

菜单权限控制

在前端权限模式下，通过 meta.perms 字段控制菜单的访问权限。例如：

meta: {
  perms: ['admin', 'sys:user'], // 拥有任一权限码即可访问
}

默认情况下，超级管理员（superAdmin）拥有所有权限。

按钮权限控制

按钮权限通过 meta.btns 字段定义，格式为：

btns: {
  'sys:user:page': '分页查询用户',
  'sys:user:detail': '查看用户详情',
  'sys:user:save': '添加用户',
}

按钮权限码通常以 btn: 或 sys: 等前缀开头，用于区分菜单权限和按钮权限。

生产环境部署流程

在前端权限模式下，当部署到生产环境并需要进行权限分配时，需要执行以下步骤：

使用超级管理员账号登录系统
进入【系统设置】->【前端路由】模块
执行菜单同步操作
进入【系统设置】->【角色管理】->【授权菜单】给角色分配权限

同步后的菜单数据将存储到后端数据库中，以便在切换到后端权限模式时使用。

最佳实践

命名规范：
- 路由名称使用冒号分隔的命名方式，如 sys:user
- 权限标识保持一致的命名规范，如模块:功能:操作
权限设计：
- 合理划分权限粒度，避免权限过多或过少
- 页面权限和按钮权限分离管理
图标使用：
- 使用统一的图标库（ant-design图标）
- 图标应与菜单功能相关
排序设置：
- 使用 order 字段控制菜单显示顺序
- 数值越小越靠前，建议以10为间隔设置

通过以上配置，您可以快速构建和管理前端路由系统，实现灵活的权限控制。

其他更多配置详见请参考：路由和菜单open in new window