vue路由模式实现原理

Vue 路由模式实现原理

Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。它们的实现原理有所不同，但核心目标都是实现前端路由的无刷新跳转。

Hash 模式

Hash 模式基于 URL 的哈希部分（即 # 之后的内容）来实现路由切换。浏览器不会向服务器发送哈希部分的请求，因此可以实现前端路由的无刷新跳转。

• URL 示例：http://example.com/#/home

• 原理：

  • 监听 hashchange 事件，当 URL 的哈希部分变化时，触发路由更新。
  • 哈希变化不会导致页面刷新，完全由前端控制。
  • 通过 window.location.hash 获取或设置哈希值。

• 代码实现：

  window.addEventListener('hashchange', () => {
    const hash = window.location.hash.slice(1); // 去掉 # 号
    // 根据 hash 更新路由内容
  });

History 模式

History 模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许直接操作浏览器的历史记录栈，实现无刷新路由切换。

• URL 示例：http://example.com/home

• 原理：

  • 使用 history.pushState 或 history.replaceState 修改 URL，不会触发页面刷新。
  • 监听 popstate 事件，当用户点击前进/后退按钮时，触发路由更新。
  • 需要服务器支持，避免直接访问子路由时返回 404。

• 代码实现：

  window.addEventListener('popstate', () => {
    const path = window.location.pathname;
    // 根据 path 更新路由内容
  });
  
  // 手动 pushState
  history.pushState({}, '', '/home');

区别与选择

• Hash 模式：

  

  • 兼容性好，支持所有浏览器。
  • URL 中包含 #，美观性较差。
  • 无需服务器额外配置。

• History 模式：

  • URL 更简洁，无 #。
  • 需要服务器配置，确保所有路径返回 index.html。
  • 兼容性稍差（仅支持 HTML5+ 浏览器）。

服务器配置示例

对于 History 模式，常见的服务器配置如下：

• Nginx：

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

• Apache：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

通过以上两种模式，Vue Router 实现了前端路由的无刷新跳转，开发者可以根据需求选择合适的模式。