Vue Router两种路由实现方式异同点总结

Vue.js 中的路由主要通过 Vue Router 实现，它支持多种路由模式，其中最常用的两种是 hash 模式和 history 模式。这两种模式在 URL 结构、工作原理以及对服务器配置的要求上有所不同。

1.Hash 模式（默认模式）

‌URL 结构‌：

URL 中带有一个 # 符号，例如 http://example.com/#/about。
#符号及其后面的内容在 HTTP 请求中不会被发送到服务器，因此不会影响服务器端的路由处理。

‌工作原理‌：

Vue Router 通过监听浏览器地址栏中的 hash 变化来触发相应的路由处理。
当用户点击一个带有 hash 的链接时，浏览器会更新地址栏中的 URL，但不会重新加载页面。
Vue Router 监听到 hash 的变化后，会根据新的 hash 值来渲染对应的组件。

‌服务器配置‌：

因为 hash 部分不会被发送到服务器，所以服务器不需要做特殊处理，可以直接返回同一个 index.html 文件。

2. History 模式

‌URL 结构‌：

URL 中没有 # 符号，看起来更接近于传统的 URL，例如 http://example.com/about。
这种方式使用了 HTML5 的 History API 来实现 URL 的跳转和管理。

‌工作原理‌：

Vue Router 通过监听浏览器地址栏中的路径变化（而不是 hash 变化）来触发相应的路由处理。
当用户点击一个链接时，浏览器会更新地址栏中的 URL，并尝试加载新的页面。
但由于 Vue Router 拦截了这些请求，并通过 History API 进行了页面渲染，所以实际上页面并不会重新加载。

‌服务器配置‌：

因为路径变化会被发送到服务器，所以服务器需要配置为对所有路由请求都返回同一个 index.html 文件（或者对应的单页应用入口文件）。
如果服务器没有正确配置，当用户直接访问某个路由（如通过刷新页面或输入 URL）时，可能会收到 404 错误。
总结
‌Hash 模式‌：简单、兼容性好（不需要服务器配置），但 URL 中带有 # 符号，可能不太美观。
‌History 模式‌：URL 更美观，但需要服务器支持并正确配置。

选择哪种模式主要取决于你的应用需求和服务器配置能力。如果希望 URL 更简洁、更符合传统 URL 的习惯，可以选择 History 模式；如果希望更简单、不需要服务器配置，可以选择 Hash 模式。