hash和history路由模式的区别

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

  1. Hash (hash routing):

    • Hash 路由是通过 URL 中的哈希符号(#)后面的部分来改变页面状态的。例如,http://example.com/#/homehttp://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/homehttp://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 中产生不必要的#字符。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值