history

语义history对象，用来记录页面的导航记录，也就是浏览器的前进、后退按钮。

API

• history.go( )：既可以按照步数，也可以按照匹配字符串跳转到历史记录。
• history.back( )：模拟后退按钮。
• history.forward( )：模拟前进按钮。
• history.length：显示记录的条数。

  H5新增的API

  关键点history模式，如果刷新页面会导致404错误，需要后端对该url进行拦截。当然使用hash模式不会出错。
  history.pushState( )：仅仅只是增加状态记录。具体的路由页面渲染由popstate事件处理。
  history.replaceState( )：覆盖当前的状态记录。

  hashchange事件

  当url中的hash值改变时，触发该事件。

  <script>
  window.addEventListener('hashchange',(event) => {      
  console.log(`${event.oldURL}---${event.newURL}`)
  },false)
  </script>

  popstate事件

  当使用history.pushState( )方法时，还需要单击前进、后退按钮，监听到url的变化，触发该事件。

  参考

  https://blog.csdn.net/qq_31965515/article/details/87968635