Vue Router 路由模式及示例详解

一、Vue Router 的两种路由模式

1. 哈希模式（Hash Mode）

• URL 格式：http://example.com/#/path
• 原理：
  • 利用 URL 的 哈希部分（#之后的内容） 实现路由切换。
  • 哈希变化不会触发浏览器向服务器发送请求。
  • 通过监听 hashchange 事件捕获路由变化。
• 实现代码：

  window.addEventListener('hashchange', () => {
    const hash = window.location.hash.slice(1); // 获取 # 后的路径
    // 根据 hash 匹配组件并渲染
  });
  

• 优点：
  • 兼容性好，支持旧版浏览器。
  • 无需服务器配置，适合静态部署。
• 缺点：
  • URL 带有 #，美观性较差。

2. 历史模式（History Mode）

• URL 格式：http://example.com/path
• 原理：
  • 基于 HTML5 History API（pushState、replaceState）。
  • 直接操作浏览器历史记录栈，无 # 符号。
  • 需监听 popstate 事件处理前进/后退操作。
• 实现代码：

  // 路由跳转（不触发页面刷新）
  history.pushState({}, '', '/path');
  
  // 监听前进/后退
  window.addEventListener('popstate', () => {
    const path = window.location.pathname; // 获取当前路径
    // 根据 path 匹配组件并渲染
  });
  

• 优点：
  • URL 更简洁，符合传统页面习惯。
• 缺点：
  • 需服务器配置支持，避免直接访问子路径返回 404。
  • 需要 HTML5 History API 支持（IE10+）。

---

二、Vue Router 的核心实现原理

1. 路由映射与匹配

• 路由配置：通过 routes 数组定义路径与组件的映射关系。

  const routes = [
    { path: '/home', component: Home },
    { path: '/user/:id', component: User }
  ];
  

• 动态路由：使用 :param 匹配动态路径参数（通过 $route.params 获取）。

2. 路由监听与响应

• 哈希模式：
  • 监听 hashchange 事件，解析 window.location.hash。
• 历史模式：
  • 通过 pushState/replaceState 修改 URL。
  • 监听 popstate 事件处理浏览器前进/后退。

3. 组件渲染

• <router-view>：作为占位符，根据当前路由动态渲染匹配的组件。
• 嵌套路由：通过 children 配置实现层级组件嵌套。

  const routes = [
    {
      path: '/user',
      component: User,
      children: [
        { path: 'profile', component: Profile } // 匹配 /user/profile
      ]
    }
  ];
  

4. 导航守卫

• 全局守卫：beforeEach、beforeResolve、afterEach。
• 路由独享守卫：在路由配置中定义 beforeEnter。
• 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
• 用途：权限控制、数据预加载、页面跳转确认等。

---

三、服务器配置（历史模式必选）

需确保服务器所有路径返回 index.html，由前端接管路由。
以 Nginx 为例：

location / {
  try_files $uri $uri/ /index.html;
}

---

四、总结

模式	哈希模式	历史模式
URL 美观性	含 #，不美观	无 #，更简洁
兼容性	兼容所有浏览器	需 HTML5 History API（IE10+）
服务器配置	无需特殊配置	需配置通配路由
实现原理	hashchange 事件 + URL 哈希	History API + popstate 事件

核心流程：

1. 根据路由模式监听 URL 变化。
2. 解析当前路径，匹配路由配置。
3. 通过导航守卫控制跳转逻辑。
4. 渲染对应组件到 <router-view>。

适用场景：

• 哈希模式：兼容性要求高、无服务器配置权限的静态站点。
• 历史模式：现代浏览器环境、需 SEO 友好 URL 的动态站点。