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 示例代码

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 示例代码

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 模式时，确保服务器配置正确，以便在直接访问页面时能够正确路由到对应的页面。