使用vue做app开发物理返回键的问题

公司为了节省时间和经费,整个appAndroid和ios技术人员只提供空壳,整个app几乎全部采用vue开发,所以导致页面加载缓慢等问题出现

目前遇到的问题就是物理返回键,ios系统没有物理返回键不存在此问题,但是安卓机几乎都有物理返回键,当我们进入一个新的路由,点击物理返回键会自动跳回上个路由,但是很多情况下我们是不让用户返回上个路由的,比如说网上购物,如果购物成功,是不给跳回确认订单页面的了,应直接返回订单列表页面。还有我们有个页面需要横屏处理,如果在这个页面返回应该进行竖屏处理,这就需要我们去监控物理返回按钮

解题思路:我上网查了一些资料  无非就是一下两种方式

window.addEventListener( "popstate" , function (e) {
      window.location = 'http://www.baidu.com' ;
    }, false );
 

document.addEventListener('backbutton', function (evt) {
}, 10);

但是由于项目是单页应用,所以我在一个组件加了 所有组件都生效了,每次点击物理返回键全部都返回到指定的页面去了,这显然不是我想要的,所以我应该把这个方法在别的路由下移除才可以,这就导致了我每次进入想要监控的页面要触发一次路由跳转,出来又触发一次,根本没有实现我点击物理返回按钮才触发的方式,而且我方法里面是路由跳转,直接进来跳回去了,几个前端同事也没有一个解决的。

后来我在store里面加了一个state多一层判断,如果是这个页面才是true,只要进入了别的路由直接把state设置为false,这得到了我想要的效果,但是每次如果页面多加了路由入口,我也需要在把state设置为false,这个方法不太美,但是目前没有想到好的解决方式

直接贴代码:

至于竖屏和横屏操作的我想到了更简单的解决方法,就是利用beforeRouteLeave,判断去向的路由如果上一层是需要调整为竖屏的页面那么就执行竖屏操作,完美解决了我的问题:

如果朋友们有什么更好的解决方法,非常欢迎告知

猜你喜欢

转载自www.cnblogs.com/kunkunsiwa/p/11249406.html