# 9.5 路由与动态菜单

:::tip 概述
路由分两类：**静态路由**（constant，登录页/异常页等始终存在）与**动态路由**（登录后由菜单 API 生成注入）。守卫负责时序编排：token 校验 → 拉取用户信息 → 生成路由 → 放行。
:::

## 目录结构

```text
router/
├── constant.ts         静态常量路由
├── base.ts             基础路由（错误页/关于/设置等固定页）
├── generator-routers.ts  动态路由生成器（菜单树 → 路由表）
├── router-guards.ts    全局守卫
├── router-icons.ts     图标映射
├── menus/              菜单相关辅助
└── types.ts            类型
```

## 动态路由流水线

```text
登录成功存 token
      ↓
路由守卫 beforeEach：
  无 token → 白名单放行 / 其余跳登录（带 redirect）
  有 token 且未生成 → GetInfo（用户信息）→ generateRoutes（消费 GetMenus 菜单树）
      ↓
菜单行映射：path → 路由路径，component → views 下组件（懒加载）
      ↓
router.addRoute 逐条注入 → 标记 isDynamicAddedRoute
      ↓
侧边栏按路由表渲染（layout）
```

## 菜单到组件的映射

后端菜单表的 `component` 字段存 views 下相对路径（如 `system/user/index`），生成器将其转为 `() => import('@/views/system/user/index')` 懒加载——**新增页面只需在 views 放组件 + 菜单表配路径**，不改路由代码。

## 守卫要点

| 机制 | 说明 |
|---|---|
| 白名单 | 登录页免 token |
| ignoreAuth | meta 声明的免登录页 |
| URL 带 token | `?token=xxx` 自动落 storage（单点登录跳转场景） |
| redirect | 未登录跳登录后回跳原路径 |
| NProgress | 导航进度条 |
| 首路由 | findFirstRoutePath 定位登录后首个落地页 |

## 排查

| 现象 | 检查 |
|---|---|
| 登录后白屏 | 菜单 component 路径与 views 文件不符（懒加载失败） |
| 刷新 404 | 部署服务器 history 模式回退配置（try_files） |
| 菜单少了 | 角色授权问题（看 GetMenus 返回） |

## 相关

- [6.3 菜单管理](/zh/modules/menu.html)（数据源头）
- [9.8 登录流程](/zh/frontend/login.html)