移动端 -- 禁止微信浏览器物理返回键

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zx_p24/article/details/84767444

需求:当完成一系列步骤之后,提交完成后,不想通过手机上的返回键返回到上一个页面,需要跳转到指定页面,这时候就需要禁止掉物理返回键

解决:(此为Vue中的写法)

export default {
    name: 'complete',
    methods: {
        routeTo () {
            this.$router.replace({name: '指定跳转的路由name'}); // 防止路由中存在上级缓存
        },
        forbidBack () {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
        }
    },
    mounted () {
        // 监听手机物理返回键时禁止返回之前的路由
        if (window.history && window.history.pushState) {
            window.addEventListener('popstate', this.forbidBack, false);
            this.forbidBack() 
        }
    },
    destoryed () {
        // 离开页面时销毁监听
        window.removeEventListener('popstate', this.forbidBack, false);
    }
}

 

展开阅读全文

没有更多推荐了,返回首页