VUE 物理返回键的处理

H5退出时所遇到的问题：

1。按返回键或anroid手机的物理返回键时，都不走destroy方法。

2。按物理返回键，添加popstate监听时，

（1）历史记录要准确，否则会执行多次监听方法

（2）进入子页面，监听没有及时移除，子页面也被监听了。

最近新做了个项目，需要在首页destroy的时候，调用接口更新数据，但是按返回键或anroid手机的物理返回键时，并不走destroy方法。

1。当按页面的返回箭头时的处理：

    backReturn () {this.$router.go(-1)this.$refs.myEnergy.destroySelf()},

按页面的返回箭头时，调用子组件的更新数据的方法；

2。按anroid物理返回键时，在网上查了很多资料，都是要添加监听，而且是当窗口历史记录改变时的监听，需要将历史记录一下。

我首先采用的方法：

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

但采用这种方法存在一些问题，当我点击其他按钮跳转到子页面再返回来，再按退出键时，监听方法会跑2次。

采用下面的方法可以解决这个跑2次的问题：

  mounted () {if (window.history && window.history.pushState) {// history.pushState(null, null, document.URL)this.pushHistory()window.addEventListener('popstate', this.backListener, false)}},beforeDestroy () {console.log('beforeDestroy', '3333')window.removeEventListener('popstate', this.backListener)},methods: {pushHistory () {var state = {title: 'title',url: '#'}window.history.pushState(state, null, '#')},backListener () {alert('77777')this.backReturn()},backReturn () {this.$router.go(-1)this.$refs.myEnergy.destroySelf()window.removeEventListener('popstate', this.backListener)},}

这种方法虽然能解决上面所说的跑2次的问题，但当按页面的返回箭头时，backReturn方法会走2次。一次按钮事件，一次监听，而且进入子页面，子页面也被添加了监听（虽然在destroy之前把监听给移除了，但由于子页面的created方法运行在父页面的beforeDestroy方法之前，所以子页面也被监听了。

最终解决：

采用监听onpagehide页面隐藏事件来处理。代码如下：

mounted () {//挂载完成后，判断浏览器是否支持popstateif (window.history && window.history.pushState) {window.addEventListener('pagehide', this.backListener, false)}},// 页面销毁时，取消监听。否则其他vue路由页面也会被监听
beforeDestroy () {window.removeEventListener('pagehide', this.backListener)},methods: {// 将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写backListener () {this.$refs.myEnergy.destroySelf()},
}

VUE 物理返回键的处理相关推荐

Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
混合开发监听安卓手机物理返回键
混合开发监听安卓手机物理返回键在用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就会拦截屏幕上的点击触摸事件以及 ...
通过手机物理返回键实现弹出层的隐藏
通过手机物理返回键实现弹出层的隐藏 <template><div class="popup"><h1 @click="popup" ...
JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
unity调用安卓手机物理返回键和home键
使用unity制作游戏时,有时候需要在游戏中触发手机的物理返回键和home键,下面在update方法中每帧监听是否按下了该键,然后写入自己要调用的方法 using System.Collections ...
JS监听手机物理返回键（及IOS微信端的bug）
需求场景有一天,头儿给我提了这样一个需求: 无论页面如何跳转,在首页的时候再按返回,直接退出... 解决思路关闭网页好说,由于我们的项目是微信公众号,直接调用微信浏览器的内置函数: WeixinJ ...

VUE 物理返回键的处理

VUE 物理返回键的处理相关推荐

最新文章

热门文章