vue项目监测浏览器返回按钮

• 在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

简单介绍history中的操作

1. window.history.back()，后退
2. window.history.forward()，前进
3. window.history.go(num),前进或后退指定数量历史记录
4. window.history.pushState(state,title,url),在页面中穿件一个history实体。直接添加到历史记录中。参数： state:储存一个对象，可以添加相关信息，可以使用history.state读取其中的内容。title: 历史记录的标题，url:创建的历史记录rul，进行历史记录操作时会跳转到该链接。
5. window.history.replaceState()，修改当前的history实体。
6. popstate事件，history实体改变时触发事件
7. window.history.state,会获得history实体中的state对象。

使用方法

取消默认的返回操作

1. 添加一条history实体作为替代原来的history实体

mounted () {
  if(window.history&&window.history.pushState){
    history.pushState(null,null,document.URL)
    window.addEventListener('popstate', this.goBack, false);
  }
},
destroyed(){
  window.removeEventListener('popstate',this.goBack,false);
},
methods:{
  goBack(){
  this.$router.replace({path:'/'});
    //replace替换原路由，作用是避免回退死循环
  }
}