哈希模式和历史模式的区别

[1993klk]

哈希模式和历史模式是当前前端路由的两种方式，这两种方式都支持改变url的同时，拦截对服务器的请求，监听url的变化，根据url解析出信息进行前端路由匹配。

---

hash模式

hash模式指的是在url中携带#及路由片段标识，这种方式本身是用于锚点定位。由于 hash 值变化不会导致浏览器向服务器发出请求，而且可以通过hashchange事件监听hash值的改变 ，浏览器的进后退也能对其进行控制。由于这种模式是基于锚点的衍生功能，兼容性非常好。所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。但是一旦采用hash模式，那么锚点功能就不能再支持了。由于浏览器在请求服务器时，会自动忽略hash模式，导致某些场景下（例如某些站点出于安全考虑，对跳转事件进行拦截，并将url发往服务端进行检测，将结果url返回再进行跳转）无法正确跳转，所以当存在链接外发，被第三方使用时，不推荐使用hash模式。hash模式的传参是基于url的，如果传递复杂数据，会有体积限制。

history模式

history模式基于传统的路由分发模式，即当用户输入一个url时，由服务器解析url的路径然后做相应逻辑处理，返回对应的页面。通过history API实现不往服务端端请求，所以对浏览器的版本会有一定的要求。并且在刷新页面的时候，浏览器会将url完整得发往服务端，如果后端不做处理，就可能返回404. historyAPI提供了访问历史堆栈的能力，通过window.history.forward()和window.history.back()进行前后跳转，通过window.history.go(step)进行指定步数跳转。 还有history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用

[1993klk]

因为常用hash模式，所以也踩了一些坑，可能会更倾向于使用history模式😂，如果其他小伙伴有其他的实践经验，也希望能在下方留言分享。