前端history路由和hash路由

hash 路由

事件hashchange只会在 hash 发生变化时才能触发,而第一次进入到页面时并不会触发这个事件,因此第一次进入到页面时我们还需要监听load事件。

当页面中的 hash 发生变化时,会触发hashchange事件,因此我们可以监听这个事件,来判断路由是否发生了变化,然后渲染不同的内容,这种路由不向服务器发送请求,不需要服务端

hashchange 事件对象有下面两个属性:

属性 类型 描述
newURL DOMString 当前页面新的URL
oldURL DOMString 当前页面旧的URL

参考:

MDN

history 路由

通过 popstate 监听 url 中的路径变化,需要客户端和服务端共同的支持

history 路由中,我们一定会使用window.history中的方法,常见的操作有:

  • back():后退到上一个路由;会触发 popstate
  • forward():前进到下一个路由,如果有的话;会触发 popstate
  • go(number):进入到任意一个路由,正数为前进,负数为后退;会触发 popstate
  • pushState(obj, title, url):前进到指定的 URL,不刷新页面;不会触发 popstate
  • replaceState(obj, title, url):用 url 替换当前的路由,不刷新页面;不会触发 popstate

如何监听 history 路由 的 pushState 和 replaceState

参考:https://zhuanlan.zhihu.com/p/130995492