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) {// 往历史记录里面添加一条新的当前页面的urlhistory.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';}
},

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

vue在移动端实现禁用物理返回键相关推荐

Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
JS监听手机物理返回键（及IOS微信端的bug）
需求场景有一天,头儿给我提了这样一个需求: 无论页面如何跳转,在首页的时候再按返回,直接退出... 解决思路关闭网页好说,由于我们的项目是微信公众号,直接调用微信浏览器的内置函数: WeixinJ ...
VUE 物理返回键的处理
H5退出时所遇到的问题: 1.按返回键或anroid手机的物理返回键时,都不走destroy方法. 2.按物理返回键,添加popstate监听时, (1)历史记录要准确,否则会执行多次监听方法 (2) ...
uni-app 监听移动端的物理返回键
监听移动端的物理返回键: methods: { }, onBackPress(options) { console.log("用户按下物理返回键"); }, ...
h5移动端实现物理返回键关闭弹框而非返回上一级页面
需求:页面中的popup弹框,可以通过物理返回键进行关闭方案: (1)当打开弹框时,向history中添加一个空记录,并且监听history的popstate变化 (2)当弹框打开状态用户操作了返回 ...
uniapp踩坑（五）：监听手机物理返回键和滑动返回事件
需求 android端和ios端点击手机物理返回键(左上角的)或页面滑动键退出后,弹出弹框,点击确定后才退出该页面. 截图展示: 实现代码: 在onBackPress()方法中实现. 注意一定要在su ...
混合开发监听安卓手机物理返回键
混合开发监听安卓手机物理返回键在用h5做混合开发过程中由于有个考试考试页面,中途不能退出,退出要添加确认操作,所以需要监听手机的返回操作,不让用户直接通过返回键返回目前了解到混合开发中有两种方式监 ...
html5plus 判断手机物理返回键
html5plus 判断物理返回键 plus.key.addEventListener('backbutton', handleBack); // callback 参数要传一个functionvar ...
android 监听物理返回键,Android应用开发之react-native 监听Android物理返回键
本文将带你了解Android应用开发之react-native 监听Android物理返回键,希望本文对大家学Android有所帮助. 1. componentWillMount(){ ...
popwindow 焦点问题，物理返回键截获，软键盘监听问题
首先是setFocusable这个方法,获取焦点:如果不获取焦点,那么popwindow中的控件都没有办法获取焦点和事件响应问题. 如果获取焦点,那么popwindow就会拦截屏幕上的点击触摸事件以及 ...

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

vue在移动端实现禁用物理返回键相关推荐

最新文章

热门文章