vue项目中如何实现监听手机物理返回键

这篇文章给大家分享的是有关vue项目中如何实现监听手机物理返回键的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

第一步：

xback.js

;!function(pkg,undefined){
varSTATE='x-back';
varelement;
varonPopState=function(event){
event.state===STATE&&fire();
}
varrecord=function(state){
history.pushState(state,null,location.href);
}
varfire=function(){
varevent=document.createEvent('Events');
event.initEvent(STATE,false,false);
element.dispatchEvent(event);
}
varlisten=function(listener){
element.addEventListener(STATE,listener,false);
}
;!function(){
element=document.createElement('span');
window.addEventListener('popstate',onPopState);
this.listen=listen;
this.record=record(STATE);
record(STATE);
}.call(window[pkg]=window[pkg]||{});
}('XBack');

第二步：

加载xback.js文件

<remote-scriptsrc="../js/xback.js"@load="loadXBack"></remote-script>

自定义组件remote-script可以参考我另外的一篇文章：https://www.jb51.net/article/178777.htm

第三步：

监听返回键事件

methods:{
//JavaScript监听手机物理返回键
loadXBack(){
window.XBack.listen(()=>{
this.dialog=this.$createDialog({
type:'confirm',
content:`确定返回吗？`,
confirmButton:{
text:'确定',
active:true,
disabled:false
},
cancelButton:{
text:'取消',
active:false,
disabled:false
},
onConfirm:()=>{
this.dialog.hide()
this.close()
},
onCancel:()=>{
this.dialog.hide()
window.history.pushState('x-back',null,window.location.href)
}
})
this.dialog.show()
})
},
}

感谢各位的阅读！关于“vue项目中如何实现监听手机物理返回键”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！