hash和history路由模式的区别

在 Web 前端开发中，history和hash是两种不同的页面导航和路由管理技术。

1. Hash (hash routing)：

   • Hash 路由是通过 URL 中的哈希符号（#）后面的部分来改变页面状态的。例如，http://example.com/#/home 和 http://example.com/#/about。
   • 当哈希值改变时，浏览器不会重新加载整个页面，只会滚动到页面中对应哈希标识的元素或者触发 JavaScript 事件，然后由 JavaScript 处理页面内容的更新。
   • 由于哈希改变不会导致页面刷新，所以它常用于实现单页面应用（SPA）的无刷新导航。
   • 哈希路由的一个主要限制是哈希值的变化不会触发浏览器的历史记录更新，这意味着用户不能通过浏览器的前进和后退按钮来导航历史状态。

2. History (history API or HTML5 History API)：

   • HTML5 引入了 History API，允许开发者在不刷新整个页面的情况下修改浏览器的历史记录和 URL。
   • 使用 History API，可以改变当前 URL 的路径部分，例如，从http://example.com/变为http://example.com/home或http://example.com/about。
   • 这种方式提供了一个更接近传统多页面应用的用户体验，因为 URL 的变化反映了用户在应用中的导航过程。
   • History API 支持pushState()、replaceState()和popstate事件，使得开发者可以添加、修改和监听浏览器的历史记录状态。
   • 与哈希路由不同，使用 History API 的页面可以通过浏览器的前进和后退按钮进行导航。

总结起来，主要的区别包括：

• URL 表示： Hash 路由在 URL 中使用#和后续的哈希值来表示不同的页面状态，而 History API 直接修改 URL 的路径部分。
• 浏览器历史记录： Hash 路由不更新浏览器的历史记录，而 History API 可以添加新的历史记录条目。
• 浏览器兼容性： Hash 路由在所有支持 JavaScript 的浏览器中都可以使用，而 History API 需要现代浏览器支持 HTML5。
• 用户体验： History API 提供了更自然的 URL 结构和更好的浏览器导航体验，而 Hash 路由可能在 URL 中产生不必要的#字符。