前端路由history路由和hash路由的区别？原理？

前端路由是指在单页应用程序（SPA）中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中，有两种主要的前端路由实现方式：基于 History API 的路由（history-based routing）和基于哈希（Hash）的路由（hash-based routing）。

1. 基于 History API 的路由（history-based routing）：

   • History API 是 HTML5 提供的一组用于操作浏览器历史记录的接口。它允许 JavaScript 动态地改变 URL，并添加、修改或删除历史记录条目，而无需刷新整个页面。
   • 实现原理：当使用基于 History API 的路由时，URL 的路径部分会随着用户的操作而动态改变。通过 History API 提供的方法（如 pushState、replaceState）可以添加或修改历史记录条目，并触发相应的页面跳转。浏览器会根据这些历史记录条目，加载相应的页面内容，并保持页面状态的一致性。
   • 示例：假设使用基于 History API 的路由，当用户点击导航链接时，JavaScript 可以使用 pushState 方法将新的路径添加到浏览器的历史记录中。然后，浏览器会加载对应的页面内容，而不会刷新整个页面。这样用户就可以通过浏览器的前进和后退按钮来导航页面，同时 URL 也会相应地改变。

2. 基于哈希的路由（hash-based routing）：

   • 哈希路由是在 URL 中使用哈希符号（#）来模拟路由的一种方式。在哈希路由中，URL 的路径部分位于 # 符号之前，而 # 符号后面的部分被称为哈希片段（hash fragment）。
   • 实现原理：当使用基于哈希的路由时，URL 中的哈希片段会随着用户的操作而改变，但不会触发整个页面的刷新。JavaScript 可以通过监听浏览器的 hashchange 事件来检测 URL 的变化，并根据哈希片段的不同值加载相应的页面内容。
   • 示例：假设使用基于哈希的路由，当用户点击导航链接时，JavaScript 可以通过修改 window.location.hash 属性来改变 URL 的哈希片段。然后，JavaScript 监听 hashchange 事件，根据新的哈希片段值加载相应的页面内容。

需要注意的是，基于 History API 的路由在现代浏览器中更为常见和推荐，因为它提供了更加优雅和语义化的 URL 结构，而且不会造成页面跳转时出现闪烁的问题。而基于哈希的路由主要用于兼容老版本浏览器或在一些特殊场景下使用。