vue3项目在页面退出时弹窗确认--用vant组件Dialog弹窗在路由改变的时候不生效问题
写vue3的H5项目的时候有个需求是回退时弹窗确认是否退出当前页面
一、第一个办法------使用onbeforeRouteLeave路由钩子
const formRouteAbi = localStorage.getItem("formRouteAbi"); //获取上一页路径 onBeforeRouteLeave((to, from, next) => { if (formRouteAbi == to.fullPath && topicInfo.topicNow > 0) { Dialog.confirm({
closeOnPopstate: false,//不加这个弹窗不会展示的,因为路由发生了变化
message: `你确定要退出社交能力测试吗,再测试${ topicInfo.topicNum - topicInfo.topicNow }个题就完成该能力测试了。`, confirmButtonText: "继续测试", cancelButtonText: "确认退出", }) .then(() => { next(false); }) .catch(() => { next(true); }); } else { next(true); } });
二、第二个办法------使用history.pushState(null, "null", document.URL);禁用前进后退功能
禁用回退功能,手动添加跳转事件
onMounted(() => { history.pushState(null, "null", document.URL); window.addEventListener("popstate", handleEvent, false); }); onUnmounted(() => { window.removeEventListener("popstate", handleEvent, false); }); const url = process.env.NODE_ENV == "production" ? location.origin + "/shengchan" : location.origin; const handleEvent = () => { history.pushState(null, "null", document.URL); if (topicInfo.topicNow > 0) { Dialog.confirm({ closeOnPopstate: false, message: `你确定要退出社交能力测试吗,再测试${ topicInfo.topicNum - topicInfo.topicNow }个题就完成该能力测试了。`, confirmButtonText: "继续测试", cancelButtonText: "确认退出", }) .then(() => {}) .catch(() => { location.href = `${url}${formRouteAbi}`; }); } else { location.href = `${url}${formRouteAbi}`; } };