Vue-Router前端路由的两种模式、区别、原理

Vue Router 使用两种主要的方式来监听 URL 的变化：一种是基于浏览器的 history API，另一种是基于 hash 变化。这两种方式分别对应 history 模式和 hash 模式。

1. History 模式

在 history 模式下，Vue Router 利用 HTML5 的 history API 来实现路由的切换。这种方式让 URL 更加美观，因为它不包含 # 符号。

实现原理

• 初始化:

  • 创建 VueRouter 实例时，可以选择 mode 为 'history'。
  • Vue Router 会初始化一个 History 对象，这个对象负责管理历史记录。

• 监听 popstate 事件:

  • Vue Router 会在浏览器窗口上监听 popstate 事件。
  • 当用户通过浏览器的前进/后退按钮改变 URL 时，popstate 事件会被触发。
  • Vue Router 会捕获这个事件并更新应用的状态。

• 使用 pushState 和 replaceState 方法:

  • 当用户导航到新的路由时，Vue Router 会使用 history.pushState 或 history.replaceState 方法来更改浏览器的历史记录。
  • 这样做不会导致页面重新加载，而是触发 popstate 事件，从而更新应用状态。

2. Hash 模式

在 hash 模式下，Vue Router 使用 URL 的 hash 部分来跟踪当前的路由状态。

实现原理

• 初始化:

  • 创建 VueRouter 实例时，默认情况下 mode 为 'hash'。
  • Vue Router 会初始化一个 HashHistory 对象，这个对象负责管理 hash 的变化。

• 监听 hashchange 事件:

  • Vue Router 会在浏览器窗口上监听 hashchange 事件。
  • 当 hash 发生变化时，hashchange 事件会被触发。
  • Vue Router 会捕获这个事件并更新应用的状态。

• 更新 hash:

  • 当用户导航到新的路由时，Vue Router 会更新 URL 的 hash 部分。
  • 这样做不会导致页面重新加载，而是触发 hashchange 事件，从而更新应用状态。

示例代码

以下是一个简单的示例，展示了如何使用 hashchange 和 popstate 事件来实现路由的变化：

使用 hashchange 事件

javascript
// 监听 hash 变化
window.addEventListener('hashchange', () => {
  // 更新应用状态
  console.log('hash changed:', location.hash);
});

// 更新 hash
function navigateTo(hash) {
  location.hash = hash;
}

使用 popstate 事件

javascript
// 监听 popstate 事件
window.addEventListener('popstate', (event) => {
  // 更新应用状态
  console.log('popstate:', event.state);
});

// 更新 history
function navigateTo(path, state) {
  history.pushState(state, '', path);
}

总结

Vue Router 通过监听 hashchange 和 popstate 事件来实现路由的切换。hash 模式简单直接，不需要服务器端支持；而 history 模式则提供了更加美观的 URL，并且需要服务器端进行适当的配置，以避免 404 错误。