vue浏览器返回监听

2021-11-15  本文已影响0人  一名有马甲线的程序媛

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

具体步骤如下:

  1. 挂载完成后,判断浏览器是否支持 popstate (但是我发现用 history.pushState 之后,返回时需要点两下才能生效,欢迎知道解决方案的小伙伴在评论区留言,小女不胜感激~)
mounted(){
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.goBack, false);
  }
}
  1. 页面销毁时,取消监听。否则其他 vue 路由页面也会被监听
destroyed(){
  window.removeEventListener('popstate', this.goBack, false);
}
  1. 将监听操作写在 methods 里面,removeEventListener 取消监听内容必须跟开启监听保持一致,所以函数拿到 methods 里面写
methods:{
  goBack(){
    this.$router.replace({path: '/'});  // replace替换原路由,作用是避免回退死循环
    history.pushState(null, null, document.URL); // 禁止跳转
  }
}

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

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

上一篇下一篇

猜你喜欢

热点阅读