第2章 声明式路由配置与动态路由

声明式路由是现代前端框架（如 Vue Router、React Router、Angular Router）的核心设计范式——开发者以配置对象声明“当 URL 匹配某模式时，渲染哪个组件”。本章聚焦 静态路由表 的编写方法、路由参数 的多种声明模式以及 动态路径匹配 的实现原理与最佳实践。

2.1 静态路由表配置原则

静态路由表是一组 path → component 映射的集合。在 Vue Router 中，典型的声明式配置结构如下：

// Vue Router 4 示例
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import User from '@/views/User.vue'

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/about', name: 'about', component: About },
  { path: '/user/:id', name: 'user', component: User, props: true }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2.2 路由参数模式

路由参数通过 动态段 声明，由 : 前缀标识。框架自动从 URL 中提取参数并存入 $route.params。

2.2.1 两种参数传递方式

• URL 路径参数：/user/:id → { id: '42' }。参数在路径中显式出现，适合资源标识。
• 查询参数：/search?q=vue → { q: 'vue' }。参数在 ? 后，适合过滤、排序等可选配置。

2.2.2 参数验证与类型转换

部分框架支持 正则表达式约束 或 props 转换函数。例如 Vue Router 中可以在 path 内嵌正则：

// 只匹配纯数字 id
{ path: '/user/:id(\\d+)', component: User }

// 自定义验证（通过导航守卫）
router.beforeEach((to, from) => {
  if (to.params.id && isNaN(Number(to.params.id))) {
    return { name: 'not-found' }
  }
})

React Router v6 使用 useParams 获取参数，声明式配置更简：

// React Router 6
<Route path="/user/:id" element={<User />} />

// 组件内
const { id } = useParams()
// 参数始终为 string，需要手动转型

2.3 动态路径匹配与通配符

动态路径匹配解决“未知路径段”或“不定长路径”的需求。

• 通配符（catch‑all）：使用 /* 或 /:pathMatch(.*)* 捕获所有剩余路径段，常用于 404 页面或全局处理。
• 可选参数：使用 ? 后缀使动态段可选，如 /user/:id? 匹配 /user/ 或 /user/123。
• 多段参数：使用 + 或 * 修饰符匹配连续段，如 /files/:path(.*)+ 匹配 /files/a/b/c。

// Vue Router 通配符配置
const routes = [
  { path: '/user/:id(\\d+)', component: User },
  { path: '/documents/:pathMatch(.*)*', component: DocumentViewer },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]

2.4 实现流程：从声明到激活

1. 编写路由配置：定义 path、component、name、props 等。
2. 实例化 Router：创建 createRouter 并注入 history 模式和路由数组。
3. 挂载到根组件：Vue 中使用 app.use(router)；React 中使用 BrowserRouter 包裹 Routes。
4. 渲染出口：<router-view />（Vue）或 <Outlet />（React）
5. 匹配生效：用户导航后框架按 优先级顺序（静态 > 动态 > 通配符）匹配第一个符合的路由并渲染对应组件。

2.5 调试与验证

• 浏览器 DevTools：检查 Network 请求确认 URL 正确；在 Vue Devtools 中查看 $route 对象。
• 打印路由匹配信息：在导航守卫中输出 to.path、to.params、to.query。
• 单元测试：使用 router.push 并断言组件是否渲染、参数是否正确传递。

2.6 常见错误与优化