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

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

第一步：

xback.js

;!function(pkg, undefined){  var STATE = 'x-back';  var element;  var onPopState = function(event){   event.state === STATE && fire();  }  var record = function(state){   history.pushState(state, null, location.href);  }  var fire = function(){   var event = document.createEvent('Events');   event.initEvent(STATE, false, false);   element.dispatchEvent(event);  }  var listen = 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-script src="../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项目中如何实现监听手机物理返回键”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！