vue监听手机物理返回键手机安卓h5返回
文章 2259 0 0 0
发布时间:2019年12月05日

概述

1、挂载完成后,判断浏览器是否支持popstate

mounted(){
    if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听 但是destroyed可能会无效,所以最后在beforeDestroy中也执行一下销毁

destroyed(){
    window.removeEventListener('popstate', this.goBack, false);
}

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

methods:{
    goBack(){
        this.$router.replace({path: '/'});
        //replace替换原路由,作用是避免回退死循环
    }
}

追梦猪在使用此来实现手机h5微信支付的时候为了用户更好的体验让用户点击完成触发返回可以不在回到上一层而是我们指定的页面所以监听了返回键但是跟原先的写法返回有了一个冲突,原先go(-3)返回变成go(-4)才能返回到指定的页面,所以在用户体验的道路上任重道远啊!

vue监听手机物理返回键手机安卓h5返回

评论专区