前言
Vue Router 提供了多种路由模式，每种模式都有其特点和适用场景。在本文中，我们将详细介绍 Vue 路由的几种模式及其区别。
Hash 模式
hash 模式是用 createWebHashHistory() 创建的。
js
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})原理
利用 window.onhashchange 事件监听 hash 值的变化这个事件会在 URL 的 Hash 部分发生变化时触发 通过监听 hashchange 事件，可以捕获到URL的Hash部分的变化。一旦hash值发生变化，就可以触发相应的回调函数，实现页面的跳转和渲染。
特点
-
在 Hash 模式下，URL 中始终包含一个以"#"为前缀的部分。例如：
http://example.com/#/home。 -
与传统的服务端路由不同。
Hash不会被包括在HTTP请求中。换句话说，在进行路由切换时，不会向服务器发送额外的请求。这使得前端能够完全掌控路由的变化。 -
在 Hash 模式下，页面的切换不会导致完整页面的重新加载。
注意： Hash 模式在传递的实际URL之前使用了一个哈希字符不过有些搜索引擎可能不会正确索引带有 # 符号的 URL。所以它在 SEO 中确实有不好的影响。
History 模式
History 模式是用 createWebHistory()创建的。
js
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错误。
区别
- URL 形式 ：Hash 模式和 History 模式在 URL 表现上有明显差异。Hash 模式使用
#符号，而 History 模式不使用。History 模式的 URL 更美观、清晰。 - 兼容性：Hash 模式兼容性更好，而 History 模式需要服务器端配置支持。
- 用户体验：History 模式在用户体验上更优，因为它可以实现无刷新页面加载，不会出现页面跳转时的闪烁。
- SEO：History 模式对搜索引擎更友好，因为 URL 更规范、清晰。
- 部署：Hash 模式相对更简单，不需要额外的服务器配置，而 History 模式在部署时需要特殊配置以确保路由的正常运行。