前端-手机页面存在弹窗，点击返回时优先隐藏弹窗

背景：原生页面如果存在弹窗，在点击返回键时，会先隐藏弹窗，如果没有显示弹窗，点击返回键时会返回到上一页，前端开发也经常面临这个问题。

一、问题解决思路

1.原生点击返回（或侧滑返回），传递事件给前端。

2. 前端页面监听原生物理返回键（或侧滑返回）。

二、最终方案

1. 原生传递事件，需要原生支持。也存在一定复杂度。
2. 前端监听原本使用popstate事件,但是在IOS全面屏下 侧滑返回效果不佳
3. 换个思路，我们的目的是为了在页面离开时，检查当前页面是否有弹窗，如果有弹窗，则关闭弹窗，如果没有弹窗，则关闭页面。于是可以选择使用路由守卫方法=> beforeRouteLeave

三、详细操作

注：beforeRouteLeave具体可以参见 Vue路由

beforeRouteLeave(to, from, next) {
    // this.dateShow 控制弹窗的显示
    if (this.dateShow) {
      this.dateShow = false
      next(false)
    } else {
      next()
    }
  }