# 前端路由与菜单

前端路由定义页面的访问路径，菜单是路由的可视化展示。项目的路由和菜单由后端动态返回，前端只需注册路由组件映射。

## 路由配置

### 文件位置

路由配置文件按模块分组：

```
ui/src/router/routes/system.ts
```

### 添加路由

在 `system.ts` 中添加岗位管理的路由：

```typescript
{
  path: '/system',
  name: 'System',
  component: Layout,
  meta: { title: '系统管理', icon: 'setting' },
  children: [
    {
      path: 'position',
      name: 'Position',
      component: () => import('/@/views/system/position/index.vue'),
      meta: { title: '岗位管理' },
    },
    // ... 其他系统管理路由
  ],
}
```

### 路由字段说明

| 字段 | 说明 |
|:----|:----|
| `path` | 路由路径（子路由不带 `/`） |
| `name` | 路由名称（唯一标识） |
| `component` | 组件引用（懒加载） |
| `meta.title` | 菜单显示标题 |
| `meta.icon` | 菜单图标 |

### 路由懒加载

```typescript
component: () => import('/@/views/system/position/index.vue')
```

使用动态 `import()` 实现路由懒加载，访问时才加载组件代码，优化首屏加载速度。

## 后端菜单配置

路由的实际注册由后端菜单数据驱动。在「系统管理 → 菜单管理」中添加菜单节点：

| 字段 | 值 |
|:----|:----|
| 菜单名称 | 岗位管理 |
| 菜单类型 | 菜单（type=1） |
| 路由路径 | `/system/position` |
| 组件路径 | `system/position/index` |
| 菜单图标 | 选择合适图标 |
| 排序号 | 设置显示顺序 |
| 状态 | 启用 |

### 菜单数据返回格式

后端接口 `/api/v1/menu/list` 返回的菜单数据：

```json
{
  "code": 0,
  "data": [
    {
      "id": 10,
      "name": "系统管理",
      "parent_id": 0,
      "path": "/system",
      "component": "Layout",
      "type": 1,
      "icon": "setting",
      "children": [
        {
          "id": 101,
          "name": "岗位管理",
          "parent_id": 10,
          "path": "/system/position",
          "component": "system/position/index",
          "type": 1,
          "icon": "post"
        }
      ]
    }
  ]
}
```

### 前端路由生成

前端在登录后请求菜单数据，动态生成路由：

```
登录成功 → 请求 /api/v1/menu/list → 生成动态路由 → 注册到 Vue Router → 渲染菜单
```

## 菜单与权限的关系

```
菜单管理
├── 系统管理（目录）
│   ├── 岗位管理（菜单）
│   │   ├── 岗位查询（权限）→ sys:position:page
│   │   ├── 岗位新增（权限）→ sys:position:add
│   │   ├── 岗位编辑（权限）→ sys:position:update
│   │   └── 岗位删除（权限）→ sys:position:delete
│   └── ...
└── ...
```

| 节点类型 | type | 作用 |
|:----|:----|:----|
| 目录 | 0 | 菜单分组，不对应页面 |
| 菜单 | 1 | 对应一个页面路由 |
| 权限 | 2 | 对应一个操作权限，不在菜单中显示 |

## 开发要点

1. **路由文件按模块分组**：`system.ts`、`content.ts` 等
2. **组件使用懒加载**：`() => import(...)` 
3. **菜单数据由后端驱动**：前端只需注册组件映射
4. **组件路径与后端 `component` 字段对应**：如 `system/position/index`
5. **新增模块只需在对应分组路由文件中追加子路由**

## 总结

前端路由使用 Vue Router 4，菜单路由由后端动态返回，前端通过 `addRoute` 动态注册。路由守卫负责权限校验和登录状态检查，未登录自动跳转登录页。