前端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