vue浏览器返回监听

前言：很多时候我们的界面上没有返回按钮，但无论是pc端还是移动端，浏览器都自带返回功能，如何获取到用户点击了浏览器自带的返回呢？~

具体步骤如下：

1. 挂载完成后，判断浏览器是否支持 popstate （但是我发现用 history.pushState 之后，返回时需要点两下才能生效，欢迎知道解决方案的小伙伴在评论区留言，小女不胜感激~）

mounted(){
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.goBack, false);
  }
}

2. 页面销毁时，取消监听。否则其他 vue 路由页面也会被监听

destroyed(){
  window.removeEventListener('popstate', this.goBack, false);
}

3. 将监听操作写在 methods 里面，removeEventListener 取消监听内容必须跟开启监听保持一致，所以函数拿到 methods 里面写

methods:{
  goBack(){
    this.$router.replace({path: '/'});  // replace替换原路由，作用是避免回退死循环
    history.pushState(null, null, document.URL); // 禁止跳转
  }
}

最后感谢文章 CSDN-vue浏览器返回监听

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！