vue在移动端实现禁用物理返回键

用vue-cli新建的项目中要实现某些页面禁用物理返回键,可使用以下的方法:
方法一:
在main.js中加上以下代码作为禁用路由判断的依据:

const history = window.sessionStorage
let historyCount = history.getItem('count') * 1 || 0
history.setItem('/', 0)
router.beforeEach(function (to, from, next) {
	if (!store.getters.routerFlag) { // 禁用路由返回,保存到vuex内的
		next(false)
		return
	}
})

store.getters.routerFlag默认是true,使用禁用路由返回时,把store.getters.routerFlag赋值为false,切记在具体某页面使用禁用路由的操作时需要在离开时重新赋值为true,以免影响别的页面使用物理返回键的操作。
在使用页面给vuex的routerFlag赋值:

在script内引用了vuex:

import store from '../../vuex/store.j

使用时:

store.commit('UPDATE_ROUTERFLAG',false)

在跳出该页面时,重新给routerFlag赋值以免影响别的页面的物理返回键的使用:

store.commit('UPDATE_ROUTERFLAG',true)

以上方法只是禁用了物理返回键,如果需要监听到点击物理返回键进行操作时,则可以使用下面的方法:
方法二:
在具体使用禁用物理返回键的页面添加如下代码:

mounted() {
   // 如果支持 popstate (一般移动端都支持)
   if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL);
      // 给 popstate 绑定一个方法 监听页面刷新
      window.addEventListener('popstate', this.backNative
, false);//false阻止默认事件
    }
},
destroyed(){
    window.removeEventListener('popstate', this.backNative
, false);//false阻止默认事件
},
methods:{
    //返回
    goBack(){
       window.location.href = 'backtonative.html';//返回操作
    },
    goOrderDetail(){
       store.commit('UPDATE_ROUTERFLAG',true)
       let orderid = JSON.parse(decodeURIComponent(this.$route.params.orderid)).orderid;
       this.$router.push(`/orderdetail/${orderid}`);
    },
    goIndex(){
       window.location.href = 'backtonative.html';
    },
    backNative() {
       console.log("监听到了");
       //点击物理返回键要执行的操作
       window.location.href = 'backtonative.html';
    }
},

注:方法一比较适用于禁用物理返回键,即点击物理返回键时不进行任何的操作,方法二除了适用于方法一的操作外,还适用于点击物理返回键时进行制定操作的情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值