拦截手机物理键返回事件,弹出二次确认返回操作

业务场景：用户填写表单过程中，点击手机物理返回键提示用户是否退出

onBeforeMount(() => {
 // 新增一个历史栈记录
 pushHistory();
 // 监听返回事件
  window.addEventListener("popstate", popstate, false);
});

onBeforeUnmount(() => {
   // 组件销毁前，移除监听事件
  window.removeEventListener("popstate", popstate, false);
});

function pushHistory() {
  var state = {
    title: "#",
    url: "#",
  };
  window.history.pushState(state, document.title, "#");
}

function popstate(e:any) {
  // 此处弹框
  showDialog.value = true;
}
// 弹框确认按钮事件
 function onConfirm() {
   router.back();
   showDialog.value = false;
 }
// 弹框取消按钮事件
 function onCancel() {
   pushHistory();
 }