需求：点击web-view页面的左上角返回按钮时，显示弹窗，点击取消或确认后才能返回。（实际上点击返回按钮会直接返回上一页）

解决方法：由于webview使用的是微信浏览器打开的，我们可以使用js的History API ，通过history.pushState来阻止返回。

history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

vue 代码

1. 在进入页面之前，执行下面代码

<script type="text/javascript">
    window.history.pushState(null, null, null)
</script>

上面代码的目的就是添加一条历史记录。用于第三个参数为null，则不会发生跳转，但是会添加一条历史记录。然后加上自己的地址，这样就会存在两条历史记录。假如只有一条历史则不会触发 popstate 事件。

data() {
     return {
       centerDialogVisible: false,
     }
  },
  mounted() {
    window.addEventListener('popstate', this.handlePopstate)
  },
  beforeDestroy() {
    window.removeEventListener('popstate', this.handlePopstate)
  },
methods:{
	//弹出框
		handleClose() {
			this.centerDialogVisible = false;
			wx.miniProgram.navigateBack({
				delta: history.length,
			});
		},
		cancel_dialog() {
			this.centerDialogVisible = false;
			wx.miniProgram.navigateBack({
				delta: history.length,
			});
		},
		//确定
		confirm_dialog() {
			this.centerDialogVisible = false;
			this.cloudRequest({
				name: 'login',
				data: {
					$url: 'update_mv',
					id: this.userRecordId,
					status: 1,
				},
			}).then((res) => {
				console.log('update_mv', res.id);
				this.getFeedMv(res.id, false)
			});
		},
		handlePopstate() {
			if (this.canChoose) {
				this.centerDialogVisible = true;
			} else {
				wx.miniProgram.navigateBack({
					delta: history.length,
				});
			}
			history.pushState(null, null, document.URL);
		},
},

效果

原文链接：https://blog.csdn.net/github_38186390/article/details/116794605