前端路由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 的变化，并根据哈希片段的不同值加载相应的页面内容，哈希路由监听到url的变化时渲染页面不需要向服务器发请求，不需要服务端的支持。
   • 示例：假设使用基于哈希的路由，当用户点击导航链接时，JavaScript 可以通过修改 window.location.hash 属性来改变 URL 的哈希片段。然后，JavaScript 监听 hashchange 事件，根据新的哈希片段值加载相应的页面内容。

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。