VUE环境下监听物理返回键/浏览器返回按钮

先上代码

mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.goback, false);//false阻止默认事件
    }
  },
  destroyed(){
    window.removeEventListener('popstate', this.goback, false);//false阻止默认事件
  }

代码分析：

window.addEventListener和window.removeEventListener就不多说了，在加载当前组件的时候绑定监听事件，在移除当前组件的时候解除绑定事件。
重点说下为什么在加载当前组件的时候为什么要先执行执行这一行代码？：

history.pushState(null, null, document.URL);

理论基础

html5提供了history.pushState(state,title,url) 来向浏览器的历史堆栈中增加一条记录，同时改变当前界面的URL地址，但是不会刷新界面。Vue的路由跳转模块就是使用这个特性来实现的：只改变浏览器地址栏地址，但是不刷新整个界面(单页应用，其实是只替换页面中的内容)。你可以任意改变地址栏的地址，但是保持当前界面不变化。
this.$router.push这个API的内部实现其实是调用了window.history.pushState来实现的。
事件popstate的触发条件：

• 用户点击返回按钮
• 从当前界面的历史堆栈中弹出一个，即改变历史堆栈的长度。

结论分析

• 假设从组件A跳转到组件B，地址栏地址从/a，变为/b,页面内容变为组件B的内容，这个时候的历史堆栈信息为：/a------/b
• 在组件B内加入上述代码，则历史堆栈信息：/a--------/b---------/b
• 在组件B内这时候popstate监听已经启用。
• 当用户点击返回按钮的时候，历史堆栈信息弹出/b,这个时候的堆栈信息：/a-------/b,触发popstate事件，触发自定义goback方法
• 在goback方法内用户可以自定义返回跳转逻辑
• 如果不在mounted方法中添加history.pushState(null, null, document.URL)这行代码，则用户在组件B内点击返回按钮，直接返回组件A内，组件B的destory方法会销毁绑定事件，无法触发事件