前端开发中Hash 模式和 History 模式的区别

在前端开发中，路由通常有两种模式：Hash 模式和 History 模式，它们的区别如下：

原理

• Hash 模式：基于 URL 中的哈希值（# 后面的部分）来实现路由。当哈希值发生变化时，浏览器不会向服务器发送请求，而是触发 hashchange 事件，前端可以监听这个事件来进行页面的切换等操作。
• History 模式：利用 HTML5 的 history.pushState() 和 history.replaceState() 方法来操作浏览器的历史记录，实现无刷新更新 URL，当 URL 改变时，会触发 popstate 事件，前端通过监听该事件来处理页面导航。

URL 表现

• Hash 模式：URL 中会包含 # 符号以及后面的哈希值，例如 https://example.com/#/page1。
• History 模式：URL 看起来更像正常的路径，例如 https://example.com/page1，更加美观和符合常规的 URL 形式。

兼容性

• Hash 模式：兼容性较好，支持低版本的浏览器，包括一些古老的 IE 浏览器。
• History 模式：需要浏览器支持 HTML5 的 History API，对于一些不支持 HTML5 的旧浏览器可能无法正常工作。

服务器配置

• Hash 模式：由于哈希值部分不会被发送到服务器，所以服务器不需要特殊配置，所有请求都可以指向同一个 HTML 文件。
• History 模式：当用户直接访问一个深层路由（如 https://example.com/page1）时，服务器需要配置正确的重定向，将所有路由请求都指向应用的入口文件，否则可能会返回 404 错误。

前进后退行为

• Hash 模式：浏览器的前进后退按钮可以正常使用，会根据哈希值的变化来切换页面，且切换时不会重新加载页面。
• History 模式：同样可以使用浏览器的前进后退按钮，通过操作历史记录来实现页面的切换，也不会重新加载页面，但在某些特殊情况下（如在浏览器控制台手动修改 URL），可能会出现一些意外行为，需要开发者进行额外的处理。

数据传递

• Hash 模式：可以通过在哈希值后面添加参数的方式传递数据，例如 https://example.com/#/page1?id=123，但这种方式传递的数据不太直观，且有长度限制。
• History 模式：可以使用 state 对象来传递更复杂的数据，例如 history.pushState({ id: 123 }, 'Page 1', '/page1')，但需要注意 state 中的数据在页面刷新时可能会丢失，需要进行适当的处理。