路由基础概念与框架对比

路由（Routing）是单页应用（SPA）与多页应用（MPA）的核心差异点。从用户点击链接到页面呈现，前后端对“路由”的理解和处理方式截然不同。本章从定义出发，对比前端路由与后端路由的本质区别，并从实现机制、API 风格、生态成熟度三个维度对齐三个主流框架的路由库。

1. 什么是路由

路由的本质是 URL 到视图（或资源）的映射关系。当用户访问一个 URL 时，系统需要根据预先注册的“路径 → 处理函数/组件”规则，决定由哪段逻辑来响应该请求。

2. 前端路由 vs 后端路由：核心差异

前端路由和后端路由的最大区别在于 “谁来维护 URL ↔ 视图的映射表”。

• 后端路由：映射表存储在服务端内存或路由配置文件中。每次请求都经过服务端匹配，服务端返回完整 HTML。典型的劣势是每次跳转都会白屏刷新。
• 前端路由：映射表以 JavaScript 对象形式存储在浏览器中。URL 变化时，前端路由器在内存中匹配组件，然后通过 DOM 操作替换 <div id="root"> 下的内容。页面不会整体刷新，但首屏需要等待 JS 下载并解析。

3. 常见路由库对比

// React Router v6 基本配置示例
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'user/:id', element: <UserProfile /> },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

4. 路由演进：从后端到前端的架构图

下图展示了两种路由模式下，一次 URL 跳转的完整数据流与资源加载差异。

5. 常见错误与调试

• 404 问题：前端路由部署到 Nginx 或静态托管后，直接刷新非首页路径会返回 404。解决方法是在服务端配置 try_files $uri /index.html，将所有未匹配路径指向入口文件。
• 参数丢失：在 React Router 中使用 state 传递对象参数时，页面刷新会导致 state 丢失。应改用 URL 参数或本地存储持久化。
• 路由守卫遗漏：Vue Router 的 beforeEach 必须调用 next() 才能放行，否则路由会永久挂起。
• 嵌套路由 URL 拼写：Flutter GoRouter 的 path 参数若忘记写 / 前缀，会导致子路由无法正确匹配。

6. 性能与稳定性优化要点

• 代码分割：React Router 配合 React.lazy()，Vue Router 配合动态 import，将每个路由对应的组件打包为独立 chunk，减少首屏 JS 体积。
• 预加载：对于用户高频访问的“下一级路由”，可以使用 prefetch 或 <link rel="preload"> 提前加载路由 chunk。
• 嵌套 Navigator 的保持：Flutter 中嵌套 Navigator 时，需注意每个 Navigator 的状态独立管理，建议使用 GlobalKey 控制外层栈。
• 路由缓存：Vue Router 配合 <keep-alive> 可以避免跳转后重新创建组件；React 可以通过 useRef + 状态提升模拟类似效果。