当前位置：首页 > VUE

vue路由模式实现原理

2026-02-24 01:51:20VUE

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 实现了前端路由的无刷新跳转，开发者可以根据需求选择合适的模式。

vue路由模式实现原理