---
name: vue-routing
when: 'Vue路由, Vue Router, 页面跳转, Vue导航, 路由守卫, 路由配置, vue-router'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-vue-routing
asset_kind: pattern
lifecycle_status: active
authority: supporting
routes:
  - '*'
primary_triggers:
  - Vue路由
  - Vue Router
  - 页面跳转
  - Vue导航
  - 路由守卫
  - 路由配置
  - vue-router
priority: P2
specificity: 3
version: 1.0.0
last_reviewed: '2026-05-22'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
status: active
---

## 决策规则
- 路由配置必须集中在 router/routes.ts
- 页面组件必须使用动态 import 懒加载
- 需要登录的页面必须有 meta.requiresAuth 标记
- 权限检查必须在路由级别拦截，禁止仅隐藏菜单
- 必须配置 404 兜底路由
- 路由定义必须集中管理（router/index.ts），禁止散落各处
- 页面组件必须使用路由懒加载（() => import()），减少首屏加载体积
- 路由守卫必须统一处理鉴权逻辑（beforeEach），禁止每个路由单独处理
- 路由 meta 必须声明权限要求（meta: { requiresAuth: true, roles: [] }）
- 未匹配路由必须配置 404 兜底（/:pathMatch(.*)*）

## 验收项
- [AC-01] 路由配置集中在 router/routes.ts
- [AC-02] 页面组件使用动态 import 懒加载
- [AC-03] 需要登录的页面有 meta.requiresAuth
- [AC-04] 有 404 兜底路由
- [AC-05] 路由集中管理
- [AC-06] 路由懒加载
- [AC-07] 统一鉴权守卫
- [AC-08] 404 兜底路由
