vue里监听安卓的物理返回键

Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由。

实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由,所以需要对安卓进行兼容

开始的方案是Android原生重写方法onKeyDown(),H5 JsBridge js去调用方法,当需要的时候屏蔽物理返回键,这种方法也能实现

由于H5单页用的是vue,vue中的路由方法也能实现,并且不需要和APP交互,更加便捷,所以最终决定采用这种方法

只需要写在路由页面中

beforeRouteLeave (to, from , next) { // 离开当前路由进行的操作
 // 如果页面上没有展示弹层,弹层全部关闭的话,按回退按钮会执行返回,即到下一个路由
// this.$vux.confirm.isVisible()用来判断是否显示vux的confirm弹层
      if (!this.showPop&&!this.$vux.confirm.isVisible()) { // 所有弹层都是关闭状态才执行回退路由
        next()
      } else { 
          this.$vux.confirm.hide()  // 关闭confirm弹层
          this.showPop = false
        next(false) // 否则就不到下个路由,而是把各个弹层关闭掉
      }
},

 

posted @ 2018-11-09 10:23  c-137Summer  阅读(2401)  评论(2编辑  收藏  举报