vue浏览器返回监听
2021-11-15 本文已影响0人
一名有马甲线的程序媛
前言:很多时候我们的界面上没有返回按钮,但无论是pc端还是移动端,浏览器都自带返回功能,如何获取到用户点击了浏览器自带的返回呢?~
具体步骤如下:
- 挂载完成后,判断浏览器是否支持 popstate (但是我发现用 history.pushState 之后,返回时需要点两下才能生效,欢迎知道解决方案的小伙伴在评论区留言,小女不胜感激~)
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
}
- 页面销毁时,取消监听。否则其他 vue 路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.goBack, false);
}
- 将监听操作写在 methods 里面,removeEventListener 取消监听内容必须跟开启监听保持一致,所以函数拿到 methods 里面写
methods:{
goBack(){
this.$router.replace({path: '/'}); // replace替换原路由,作用是避免回退死循环
history.pushState(null, null, document.URL); // 禁止跳转
}
}
最后感谢文章 CSDN-vue浏览器返回监听
如果本文对你有所帮助,感谢点一颗小心心,您的支持是我继续创作的动力!