前言

Vue Router 提供了多种路由模式，每种模式都有其特点和适用场景。在本文中，我们将详细介绍 Vue 路由的几种模式及其区别。

Hash 模式

hash 模式是用 createWebHashHistory() 创建的。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

原理

利用 window.onhashchange 事件监听 hash 值的变化这个事件会在 URL 的 Hash 部分发生变化时触发通过监听 hashchange 事件，可以捕获到URL的Hash部分的变化。一旦hash值发生变化，就可以触发相应的回调函数，实现页面的跳转和渲染。

特点

1. 在 Hash 模式下，URL 中始终包含一个以“#”为前缀的部分。例如：http://example.com/#/home。

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

3. 在 Hash 模式下，页面的切换不会导致完整页面的重新加载。

注意： Hash 模式在传递的实际URL之前使用了一个哈希字符不过有些搜索引擎可能不会正确索引带有 # 符号的 URL。所以它在 SEO 中确实有不好的影响。

History 模式

History 模式是用 createWebHistory()创建的。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

原理

History 模式使用 history.pushState() 和 replaceState() 这两个 API 来操作 URL。这两个方法可以改变当前浏览器的地址栏 URL，而不会触发页面的重新加载。通过监听 popstate 事件来捕获 URL 的变化，这个事件会在浏览器的历史记录发生变化时触发。

特点

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

• History 模式需要服务器配置支持：在使用 History 模式时，确保服务器配置正确，以便在直接访问页面时能够正确路由到对应的页面。如果服务器没有配置相应的页面，用户访问时，就会得到一个404错误。

区别

1. URL 形式：Hash 模式和 History 模式在 URL 表现上有明显差异。Hash 模式使用 # 符号，而 History 模式不使用。History 模式的 URL 更美观、清晰。
2. 兼容性：Hash 模式兼容性更好，而 History 模式需要服务器端配置支持。
3. 用户体验：History 模式在用户体验上更优，因为它可以实现无刷新页面加载，不会出现页面跳转时的闪烁。
4. SEO：History 模式对搜索引擎更友好，因为 URL 更规范、清晰。
5. 部署：Hash 模式相对更简单，不需要额外的服务器配置，而 History 模式在部署时需要特殊配置以确保路由的正常运行。