47 lines
2.1 KiB
Markdown
47 lines
2.1 KiB
Markdown
|
# 04. 路由与页面组织（Router & Views）
|
|||
|
|
|
|||
|
|
- 路由文件：`src/router/index.ts`
|
|||
|
|
- 核心结构：
|
|||
|
|
- `constantRoutes`：登录/注册/404 等公共路由
|
|||
|
|
- `asyncRoutes`：业务路由，通常以 `Layout` 为根节点容器
|
|||
|
|
|
|||
|
|
## Views 目录约定（src/views）
|
|||
|
|
|
|||
|
|
本仓库页面主要集中在：
|
|||
|
|
|
|||
|
|
- `src/views/index/`：工作台/仪表盘等示例首页
|
|||
|
|
- `src/views/vab/`：组件/表单/表格等示例页（演示用途居多）
|
|||
|
|
- `src/views/other/`：杂项示例页（iframe/excel/drag/nested 等）
|
|||
|
|
- `src/views/setting/`：后台管理相关页面（用户/角色/部门/菜单/字典/任务/日志等）
|
|||
|
|
- `src/views/tools/`：工具类页面（如 EyeDropper/SpeechSynthesis）
|
|||
|
|
- `src/views/login/`、`src/views/register/`、`src/views/callback/`：登录链路
|
|||
|
|
- `src/views/403.vue`、`src/views/404.vue`：错误页
|
|||
|
|
|
|||
|
|
路由对页面的引用方式以动态导入为主：`component: () => import('@/views/...')`。
|
|||
|
|
|
|||
|
|
## meta 约定（给菜单/面包屑/行为用）
|
|||
|
|
|
|||
|
|
常见 meta 字段（与组件实现强相关）：
|
|||
|
|
|
|||
|
|
- `meta.title`：菜单/面包屑/页面标题（`VabLanguage` 会用它更新 `document.title`）
|
|||
|
|
- `meta.icon` + `meta.isCustomSvg`：菜单与面包屑图标（`VabMenu`/`VabBreadcrumb`）
|
|||
|
|
- `meta.hidden`：是否从菜单隐藏（`VabMenu`）
|
|||
|
|
- `meta.breadcrumbHidden`：是否从面包屑隐藏（`VabBreadcrumb`）
|
|||
|
|
- `meta.noColumn`：Column 布局下的特殊处理（`VabColumnBar` 会折叠菜单并隐藏 fold 按钮）
|
|||
|
|
- `meta.target`（如 `_blank`）：点击菜单时打开方式（`VabMenuItem`）
|
|||
|
|
- `meta.badge` / `meta.dot`：菜单右侧标记（`VabMenuItem`）
|
|||
|
|
|
|||
|
|
## AI 生成新模块页面的最小流程
|
|||
|
|
|
|||
|
|
- 在 `src/views/<module>/` 创建页面组件
|
|||
|
|
- 在 `src/router/index.ts`（或其拆分文件）添加路由记录
|
|||
|
|
- 如涉及权限/菜单：同步 `meta`（`title/icon/guard/...`）
|
|||
|
|
|
|||
|
|
建议：新增页面后运行一次 [AI-Coding/Validation.md](AI-Coding/Validation.md) 里的“router ↔ views 对账”脚本，防止路由引用了不存在的 .vue，或新页面忘记挂到路由上。
|
|||
|
|
|
|||
|
|
## 验收点
|
|||
|
|
|
|||
|
|
- 访问路由能渲染页面
|
|||
|
|
- 菜单与面包屑符合 `meta` 约定
|
|||
|
|
- 刷新后路由仍可恢复
|