哈希路由和浏览器路由

553 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第23天,点击查看活动详情

哈希路由最大的特点,是纯前端控制,服务端完全无感知,不需要发起任何的请求。可能唯一需要做的是刷新的时候别把哈希给弄丢了,保证前端还是能拿到正确的静态资源即可。

hash改变时,会触发hashchange事件,可以监听该事件对页面进行更新。变化后的路由不是标准的路由,是一个比较特殊的模式,有点hack哈。

浏览器路利用的是history api里的pushstate和replacestate方法,实现页面的无刷新更新,变化后的路有是标准的路由,即路径。

浏览器相比于hash路由,优势就是可以pushstate到任意的url,hash不改变路径,还是同一个文档里的内容。可以通过 stateobject 将任意的数据添加到history堆栈记录中。但是它需要服务端有改造成本,尤其是后端是java,更难。

触发hashchange的几种情况,我们需要先了解清楚:

  1. hash值发生了变化,前进后退也可以
  2. 直接输入一个带hash的地址,也会触发hashchange事件,因为先访问不带hash的路径,拿到静态资源之后hash变化
  3. 直接通过点击 a 标签,也可以触发 hashchange事件

history模式下,可以通过history.length 去访问一共访问过几个地址。虽然不能看到具体的信息,但是前端可以在页面之间来回跳转。

可以通过 history.pushState来修改 history 对象的历史记录,如果history 对象发生了变化,会触发 popstate 事件, 但是需要注意,通过调用 pushstate 或者 replaceState 方法,不会处罚该事件,而且第一次加载页面的时候,这个事件也不会触发。

所以可以看到哈希路由非常适合做路由,比较简单,但是实际上比较hack, 原有的设计初衷不符合;但是history路由功能更为强大一些,并且支持较大的数据。