Vue中的hash模式和history模式

两者的主要区别并不是在 是否需要后端支持 或 是否可以控制请求，而是在 URL 结构、路由变化的实现方式 和 浏览器行为 上有显著差异。

1. hash 模式 vs history 模式的区别

URL 结构

• hash 模式：

  • URL：https://example.com/#/home
  • # 后的部分：URL 中 # 后的部分称为 hash，它是前端用来记录路由状态的一部分。浏览器会根据 # 后的路径切换组件，但不会向服务器发送请求。
  • 影响范围：当 URL 改变时，只有前端会响应，服务器对 URL 后的 # 后的路径部分 不关心。

• history 模式：

  • URL：https://example.com/home
  • 没有 #：history 模式下的 URL 看起来像传统的路径，完全符合现代网页的 URL 格式。
  • 影响范围：浏览器的地址栏直接显示的是完整路径（如 /home）。当路径发生变化时，浏览器会向服务器请求新的资源。

浏览器行为

• hash 模式：

  • 不请求后端：浏览器只会更新地址栏中的 # 部分，路径的变化 不会导致页面刷新，也不会向服务器发起请求。
  • 页面切换：前端完全控制路由，用户切换页面时，浏览器 不会重新加载页面，只是通过 JavaScript 动态修改视图。

• history 模式：

  • 请求后端：当用户刷新页面或直接访问某个 URL 时，浏览器会向服务器发起请求，获取相应的页面或资源。
  • 路径与后端一致：由于路径看起来像传统路径，用户直接输入路径时（如 /home 或 /about），浏览器会向后端发送请求。如果后端没有处理这个路径，就会返回 404 错误。

实现方式

• hash 模式：

  • 利用浏览器的 onhashchange 事件监听 URL 中 # 后部分的变化，Vue Router 通过监听这个变化来切换组件，而不会向服务器发起请求。

• history 模式：

  • 利用 HTML5 提供的 History API（pushState 和 replaceState）来改变浏览器地址栏中的路径，同时不重新加载页面。虽然浏览器地址栏的 URL 会改变，但前端路由的管理仍由 JavaScript 完成。
  • 后端支持：当 URL 路径改变时，浏览器 向服务器发起请求，如果用户刷新或直接访问某个 URL，后端需要返回正确的资源。

2. 需要后端支持

• hash 模式：

  • 由于 # 后的部分不会发送到服务器，前端完全负责路由管理，不需要后端支持。
  • 当用户刷新页面时，前端的 Vue 应用依然能够接管页面的渲染，# 后的路径不会影响后端。

• history 模式：

  • 需要后端支持：当用户刷新页面或直接访问某个 URL 时，浏览器会向服务器请求这个路径（如 /home、/about）。如果服务器没有处理这些路径，会返回 404 错误。
  • 后端需要配置 所有路径 指向前端应用的入口文件（如 index.html），然后由前端的 Vue Router 处理实际的路由匹配。

3. SEO 和用户体验

• hash 模式：

  • 不太友好：由于 URL 中包含 #，这不符合传统的 URL 规范，且搜索引擎通常不会索引 # 后的内容，因此在 SEO（搜索引擎优化） 上不太友好。
  • 用户体验：虽然 hash 模式不需要后端支持，但用户看到的 URL 会包含 #，可能影响美观和可读性。

• history 模式：

  • SEO 更友好：没有 #，URL 看起来更加干净、直观，符合传统的 URL 规范，更适合 SEO。搜索引擎更容易索引这类 URL。
  • 用户体验：URL 更符合用户的直觉，且用户在地址栏看到的路径是 标准的 URL 路径，更易于分享和理解。

4. 总结：两者的主要区别

特性	hash 模式	history 模式
URL 结构	https://example.com/#/home	https://example.com/home
是否请求后端	不会向服务器发起请求（只会更新浏览器地址栏）	会向服务器发起请求，尤其是刷新页面或直接访问时
后端支持	不需要，前端完全控制路由	需要后端支持，后端要返回 index.html 作为入口
用户体验	URL 包含 #，不符合传统 URL 规范，SEO 不友好	URL 看起来更干净，符合传统的 URL 格式，SEO 更友好
页面刷新行为	刷新页面时只会加载前端应用	刷新页面时会请求后端资源，若未配置正确会返回 404

总结

• hash 模式：适用于不需要后端配合的简单应用，用户体验和 SEO 较差，但实现简单，且不需要后端支持。
• history 模式：适用于需要漂亮、符合标准的 URL 且能支持 SEO 的应用，但需要后端支持来处理路径请求，避免 404 错误。