使用Vue和H5做安卓手机端时候,安卓的实体返回键会返回上一个路由页面,导致页面出现各种问题。
在网上苦苦寻找了各种方法,都不能完美解决,最终我想到下面这种方法,基本解决需求。
一、路由跳转页面改写
在组件中,有需要跳转页面,并且不让用户返回的情况,例如:支付、登录、注销等。请做一下修改:
1、this.$router.push()全部改写为this.$router.replace()
2、 全部改写为
因为this.$router.push会在window.histroy中保留浏览器的历史记录。
这样返回键会返回上一个路由,而this.$router.replace不会在history中保留。
二、子页面返回改写
以聊天界面为例:
1、消息列表页面
每条消息的点击事件使用this.$router.push(),点击进入详情页,这样保证histroy中记录着主页面的地址。
2、详情页面
左上角有个返回按钮,这个返回按钮的跳转事件千万不能用this.$router来跳转,否则会出现返回错乱。
而是使用this.$router.back() 或者 this.$router.go(-1),这样既能成功返回上一页,也会清除掉上一条history记录。
如果需要带状态或者参数返回上一页,我目前的方法是将子页面写成弹窗形式,悬浮在最顶层页面。
如果还有什么特殊情况,或者有更深层级的子页面,请参照上面这个思路来处理。
反正这个问题很蛋疼,没有找到特别好的办法。
如果有大佬有更好的方法,请在下面评论,谢谢!