问题背景: 项目中用户总是可能误触到返回按钮,但此时可能并不希望返回,所以需要弹框进行确认操作。
原理:利用history 和 浏览器 刷新popstate状态 去实现
参考资料:https://blog.youkuaiyun.com/so12138/article/details/84250196
每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新,去做一些事情。
1、挂载完成后,判断浏览器是否支持popstate
// BBBB.vue
mounted(){
// 如果支持 popstate 一般移动端都支持了
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL);
// 给 popstate 绑定一个方法 监听页面刷新
window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
}
},
2、页面销毁时,取消监听。否则其他vue路由页面也会被监听
// BBBB.vue
destroyed(){
window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
},
3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写
methods:{
// BBBB.vue
backChange() {