问题的背景是,通过扫二维码进入公众号页面,点击返回的时候由于找不到它的上一个路由,导致跳转到一个空的页面,接下来是该问题的解决办法:
我们想要的效果是,点击返回----弹出提示----确定离开该页面----退出公众号
需要监听手机的返回按钮:
1、挂载完成后,判断浏览器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.fun, false);//false阻止默认事件
}
}
2、页面销毁时,取消监听。否则其他vue路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.fun, false);//false阻止默认事件
}
3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写
methods:{
fun(){
console.log("监听到了");
}
}
以上内容来源:vue项目中监听手机物理返回键_unbreakablec的博客-CSDN博客_vue物理返回键捕获
以上我们做到了监听手机物理返回键,当我们触发返回键的时候会执行fun()这个方法
接下来就可以在fun里面写我们点击返回需要执行的方法及事件
安卓的退出方法:
document.addEventListener(
'WeixinJSBridgeReady',
function() {
WeixinJSBridge.call('closeWindow')
},
false
)
ios的退出方法:
WeixinJSBridge.call('closeWindow')
整合到一起:
最好加个setTimeout,要不然WeixinJSBridge可能会出现未定义的错误