Vue 路由模式深度解析：Hash ， History

1. Hash 模式详解

1.1 特点

1.1.1 URL 中包含符号"#"

在 Hash 模式下，URL 中始终包含一个以"#"为前缀的部分。例如：http://example.com/#/home。这个"#"号是 Hash 模式的显著标志。

1.1.2 Hash 不包括在 HTTP 请求中

与传统的服务端路由不同，Hash 不会被包括在 HTTP 请求中。换句话说，在进行路由切换时，不会向服务器发送额外的请求。这使得前端能够完全掌控路由的变化。

1.1.3 页面切换不触发完整页面的重新加载

一个显著的特点是，在 Hash 模式下，页面的切换不会导致完整页面的重新加载。仅仅通过改变 URL 中的 Hash 部分，前端可以实现页面内容的动态更新，这有助于提供更流畅的用户体验，特别适用于单页面应用（SPA）。

1.2 实现原理

1.2.1 利用 `window.onhashchange` 事件监听 hash 值的变化

Hash 模式的核心在于利用浏览器提供的 window.onhashchange 事件。这个事件会在 URL 的 Hash 部分发生变化时触发。

1.2.2 当 URL 的 hash 发生变化时，触发 `hashchange` 事件

通过监听 hashchange 事件，我们可以捕获到 URL 的 Hash 部分的变化。一旦 hash 值发生变化，就可以触发相应的回调函数，实现页面的跳转和渲染。

1.3 示例代码

arduino 复制代码

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
    // 更多路由配置
  ]
})

在上述示例中，通过配置 Vue Router 的 mode 为 'hash'，我们指定了使用 Hash 模式。定义了两个基本的路由，分别对应着路径 '/' 和 '/about'，以及它们对应的组件 Home 和 About。这样，我们就创建了一个基于 Hash 模式的 Vue 路由。

2. History 模式详解

2.1 特点

2.1.1 URL 更规范，不包含"#"

History 模式下的 URL 更加规范，不再包含以"#"为前缀的部分。例如：http://example.com/home。相比 Hash 模式，这使得 URL 更具可读性和美观性。

2.1.2 基于 HTML5 的新特性，通过 `history.pushState()` 和 `replaceState()` 修改历史记录栈

History 模式是基于 HTML5 的新特性而来的。通过使用 history.pushState() 和 replaceState() 这两个 API，我们可以在不重新加载页面的情况下修改浏览器的历史记录栈，从而改变当前地址栏的 URL。

2.2 实现原理

2.2.1 利用 `history.pushState()` 和 `replaceState()` API 操作实现 URL 的变化

History 模式的关键在于使用 history.pushState() 和 replaceState() 这两个 API 来操作 URL。这两个方法可以改变当前浏览器的地址栏 URL，而不会触发页面的重新加载。

2.2.2 通过监听 `popstate` 事件来捕获 URL 的变化

为了捕获到 URL 的变化并进行相应的页面跳转和渲染，我们需要监听 popstate 事件。这个事件会在浏览器的历史记录发生变化时触发。

2.3 示例代码

arduino 复制代码

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
    // 更多路由配置
  ]
})

在上述示例中，我们配置了 Vue Router 的 mode 为 'history'，以使用 History 模式。定义了两个基本的路由，分别对应着路径 '/' 和 '/about'，以及它们对应的组件 Home 和 About。这样，我们就创建了一个基于 History 模式的 Vue 路由。

3. Hash vs. History

3.1 区别

3.1.1 形式上

Hash 模式 ：URL 包含"#"。例如：http://example.com/#/home。
History 模式 ：URL 更规范，不包含"#"。例如：http://example.com/home。

3.1.2 功能上

Hash 模式：适用于单页应用，通过在 URL 中的 Hash 部分进行路由切换。
History 模式：需要服务器支持，更适用于传统多页应用，通过 HTML5 的新特性实现页面切换。

3.2 选择场景

3.2.1 一般场景下

Hash 模式和 History 模式均可使用，根据具体需求和项目特点进行选择。

3.2.2 不希望 URL 中有"#"

选择 History 模式：如果不希望 URL 中包含"#"，而更追求 URL 的规范和美观。

3.2.3 分享页面给第三方应用

使用 History 模式：当需要分享页面给第三方应用时，由于一些应用不允许 URL 中包含"#"，因此 History 模式可能更为适合。

3.3 注意事项

History 模式需要服务器配置支持：在使用 History 模式时，确保服务器配置正确，以便在直接访问页面时能够正确路由到对应的页面。