vue阻止弹窗_Vue项目中阻止返回，弹出提示框，包括安卓、iOS物理返回

在一个移动端项目中，有一个需求，在未输入内容时点击返回(包括安卓、iOS等终端设备的物理返回按钮)，弹窗提示，并且阻止返回上一个页面。

比较反人类的一种操作，不过只要能想到的就没有代码做不到的，在网上找到一个解决方案：mounted() {

// 按需使用：在页面一进来的时候，添加一个历史记录

window.history.pushState(null, null, document.URL);

// 给 window 添加一个 popstate 事件，拦截返回键，执行 this.onBrowserBack 事件，addEventListener 需要指向一个方法

window.addEventListener("popstate", this.onBrowserBack, false);

},

destroyed() {

// 页面销毁时必须要移除这个事件，vue 不刷新页面，不移除会重复执行

window.removeEventListener("popstate", this.onBrowserBack, false);

},

watch: {

// 弹框监听，当弹框显示的时候，pushState 添加一个历史，供返回键使用

PopupShow: {

handler(newVal, oldVal) {

if (newVal.Terms === true) {

window.history.pushState(null, null, document.URL);

}

},

deep: true

}

},

methods: {

onBrowserBack() {

// 这里写点击返回键时候的事件

// 比如判断需求执行 back() 或者 go(-2) 或者 PopupShow=true 弹出提示框

}

}

注：popstate事件需要每个页面单独写，不适合写成公共方法。