常利用的场景：移动前端
1、安卓手机物理返回键
2、苹果手机在企业微信打开浏览器的返回按钮
移动前端开拓措辞是：vue
路由跳转：vue-router hash模式
先先容一下html5中history有哪些属性和API，我们用到了个中2个方法（pushState、replaceState），来根据状态存储的数据判断是否触发返回事宜
1、window.history.length - 历史记录长度
2、window.history.state - 历史记录状态
3、window.history.go(num) - 回到指定的历史记录（参数num可以是正/负）
4、window.history.back() - 回到上一个历史记录
5、window.history.forward() - 回到下一个历史记录（条件当前历史记录不是最新的）
6、window.history.pushState(state, title, newUrl) - 新增一个历史记录（路径即是当前的url + newUrl ）
7、window.history.replaceState(state, title, newUrl) - 更换当前的历史记录路径（路径即是当前的url + newUrl ）
监听事宜：window.onpopstate
pushState和replaceState浸染演示：
打开当前页面路径如下(D:/webstorm_workspace/demo-code/eventListenerBack/test.html)，历史记录长度1
点击pushState按钮：创建了一条新的历史记录（新建状态）、历史记录长度2
pushState按钮的代码如下：
// pushState会新建一条历史记录pushState = () => { let state = {'name': '张三 - pushState'} window.history.pushState(state, null, '?pushState') console.log('pushState') console.log(window.history.state)}
点击replaceState按钮：更换当前的历史记录（更新状态），历史记录长度2
replaceState按钮的代码如下：
// replaceState会覆盖当前的历史记录replaceState = () => { let state = {'name': '张三 - replaceState'} window.history.replaceState(state, null, '?replaceState') console.log('replaceState') console.log(window.history.state)}
监听事宜演示
点击返回按钮：会触发监听事宜window.onpopstate方法；之前的路径是(D:/webstorm_workspace/demo-code/eventListenerBack/test.html?replaceState)，返回到(D:/webstorm_workspace/demo-code/eventListenerBack/test.html)
返回按钮的代码如下：
// 返回按钮监听window.onpopstate = (e) => { console.log('触发onpopstate方法') console.log(historyState) // 判断前一个历史记录存储的state数据来确定是否须要改变当前的数据}
总结
1、什么时候会触发这个监听事宜？除了back方法，go和forward方法也可以触发
2、提高退却撤退历史记录须要根据条件判断时，须要绑定监听事宜
vue-router模式：https://www.cnblogs.com/xufeimei/p/10745353.html
演示代码：https://github.com/github-gmm/demo-code/blob/master/eventListenerBack/test.html
