精美网站自助建站平台

Hash

Hash 模式是在 URL 中使用井号（#）来作为路由的模式。在 Hash 模式下，即使页面刷新，浏览器仍然只会请求页面的初始 HTML 文件，所有的路由变化都会在 URL 前面添加 “#/” 符号。

原理
在 Hash 模式下，路由的机制是使用 window.location 中的 hash 属性。将路由路径添加到 URL 的 hash 值中，然后在 JavaScript 中通过监听 hash 值的变化，来响应路由变化。Hash 模式还支持 hashchange 事件，可以在 URL 变化时触发回调函数。

优缺点
优点：Hash 模式的最大特点在于支持在所有浏览器中运行。同时，因为 Hash 路径不会被发送到服务器，因此可以避免服务器配置的问题。

缺点：Hash 模式的 URL 看起来比较难看，因为所有路由信息被放在 URL 的 hash 中。同时，网站爬虫无法识别路由路径，因此不适合用于 SEO。

总结来说，History 模式和 Hash 模式都是用于前端路由的常见机制。History 模式的 URL 更加美观但需要 HTML5 支持，Hash 模式的 URL 不美观但是更加兼容性。开发者在选择路由模式时需要根据具体的项目需求进行权衡。

History

History 模式是通过 HTML5 引入的新特性，它使用浏览器的 History API 来管理历史记录。在 History 模式下，通过设置 HTML5 标准中的 popState 方法，以及 pushState 和 replaceState 方法，可以在不刷新页面的情况下，更改浏览器的 URL。

原理
在 History 模式下，路由的核心机制是使用浏览器提供的 popstate 事件来响应 URL 的变化。在页面加载时，历史堆栈中的当前状态会被保存下来，每当用户点击浏览器的 “前进” 或 “后退” 按钮时，浏览器就会触发 popstate 事件，并通过该事件传递到 JavaScript 中的状态对象。这样，通过监听该事件对象，我们就可以在浏览器中实现前端路由。

优缺点
优点：History 模式的 URL 更加美观，用户体验更加友好。同时，由于完整的 URL 可以被搜索引擎识别，因此更加便于 SEO。

缺点：由于 History 模式需要浏览器支持 HTML5 的 History API，因此在老版本的浏览器中可能无法正常运行。在没有特殊配置的情况下，在后端服务器上的 URL 不正确时，将会返回 404 错误，这需要特殊的服务器配置以支持 History 模式。

popState ， pushState 和 replaceState 应用

当使用 History API 进行前端路由时，可以使用以下三个方法来管理浏览器历史记录和 URL：

popState 方法

popState 方法用于监听页面历史记录的变化，当用户点击浏览器的 “前进” 或 “后退” 按钮时，会触发该方法。

window.addEventListener('popstate', function(event) {// 历史记录发生变化时的处理逻辑// event.state 可以获取当前历史记录的状态对象
});

这个方法将触发一个 popstate 事件，并提供了 event.state 属性，可以使用该对象来获取当前历史记录的状态。

pushState 方法

pushState 方法用于向浏览器的历史记录中添加一个新的状态，并且不会引起页面的刷新。

history.pushState(state, title, url);

state：需要保存到历史记录的状态对象。
title：网页的标题，目前大多数浏览器都不会显示这个参数。
url：要添加的新的 URL 地址。
这个方法可以在不刷新页面的情况下修改浏览器的 URL，并向历史记录添加一个新的状态。

replaceState 方法

replaceState 方法用于替换当前历史记录中的状态，而不会创建一个新的历史记录。

history.replaceState(state, title, url);

state：需要保存到历史记录的新状态对象。
title：网页的标题，目前大多数浏览器都不会显示这个参数。
url：要替换的新的 URL 地址。
这个方法将当前历史记录中的状态替换为新的状态，而不会创建一个新的历史记录条目。页面的 URL 也将被替换为新的 URL。

这些 History API 方法使得开发者能够在前端实现路由切换和历史记录管理，并且能够在不刷新整个页面的情况下，根据需要修改浏览器 URL 和历史记录的状态。这样可以增强用户体验，实现单页应用（SPA）的路由功能。