路由模式之 hash 模式 vs history 模式
2023-09-24 15:47:06
理解 hash 模式和 history 模式：选择最佳单页面应用程序路由
在构建单页面应用程序时，路由模式对于管理应用程序的状态和用户导航至关重要。两种最常用的路由模式是 hash 模式和 history 模式。本文将深入探讨这两种模式，帮助您为您的应用程序做出明智的选择。
什么是 hash 模式？
hash 模式 使用 URL 哈希片段（#）来表示应用程序的状态。当您在应用程序中导航时，哈希片段会相应地更改，但不会触发整个页面的重新加载。
优点：
- 跨浏览器兼容性： hash 模式受到所有现代浏览器的一致支持，使其成为跨平台应用程序的可靠选择。
- 书签支持： hash 值包含在 URL 中，允许书签和直接链接到应用程序的特定状态。
- 简单实现： hash 模式的实现非常简单，只需更改
window.location.hash属性。
缺点：
- URL 不友好： hash 值显示在 URL 中，这可能会影响应用程序的专业外观。
- REST API 受限： hash 模式不适合使用基于 REST 的 API，因为它不更改服务器上的实际 URL。
- 回退按钮问题： 使用回退按钮时，hash 模式可能会出现问题，因为它可能导致应用程序状态意外更改。
什么是 history 模式？
history 模式 使用浏览器的历史记录 API 来管理应用程序状态。当您在应用程序中导航时，浏览器会将状态推入或弹出历史记录堆栈，而不会重新加载页面。
优点：
- URL 友好： history 模式使用实际 URL 来表示应用程序状态，这提供了更干净、更专业的用户体验。
- REST API 友好： history 模式适用于基于 REST 的 API，因为它会更改服务器上的实际 URL。
- 后退按钮支持： history 模式支持后退按钮，允许用户轻松导航应用程序。
缺点：
- 浏览器兼容性： history 模式不受所有浏览器支持，特别是较旧的浏览器。
- 需要服务器端配置： history 模式需要服务器端配置才能正确工作，特别是对于动态路由。
- 复杂实现： history 模式的实现比 hash 模式更复杂，需要使用浏览器历史记录 API。
何时使用 hash 模式？
以下情况更适合使用 hash 模式：
- 需要跨浏览器兼容性
- 需要书签支持
- 简单实现对于应用程序至关重要
- 不使用基于 REST 的 API
何时使用 history 模式？
以下情况更适合使用 history 模式：
- 需要 URL 友好性
- 使用基于 REST 的 API
- 需要后退按钮支持
- 应用程序浏览器兼容性不是关键因素
常见问题解答
1. 如何在应用程序中使用 hash 模式？
// 更新 hash 片段以更改应用程序状态
window.location.hash = "#new-state";
// 获取当前 hash 片段以获取应用程序状态
const currentState = window.location.hash.substring(1); // 移除哈希符号
2. 如何在应用程序中使用 history 模式？
// 使用 `history.pushState()` 将状态推入历史记录堆栈
history.pushState({ page: "new-state" }, "", "/new-state");
// 使用 `history.replaceState()` 替换当前历史记录状态
history.replaceState({ page: "updated-state" }, "", "/updated-state");
3. 如何处理 history 模式的服务器端配置？
您需要在服务器上配置重写规则，以便在客户端请求未知路由时将它们重定向到 index.html。
4. 如何解决 hash 模式的回退按钮问题？
可以使用事件侦听器来监听 popstate 事件并相应地更新应用程序状态。
5. 如何选择适合我的应用程序的路由模式？
考虑应用程序的浏览器兼容性、对 REST API 的使用、URL 友好性以及后退按钮支持的需求。根据这些因素，您可以选择最合适的路由模式。
结论
hash 模式和 history 模式是管理单页面应用程序状态的两种不同方法。hash 模式更简单且具有跨浏览器兼容性，但存在 URL 不友好和回退按钮问题。另一方面，history 模式提供 URL 友好性、REST API 支持和后退按钮支持，但需要服务器端配置和较新的浏览器支持。根据您的应用程序的具体需求和限制，选择正确的路由模式至关重要。
