vue3项目在页面退出时弹窗确认--用vant组件Dialog弹窗在路由改变的时候不生效问题
2024-09-08 12:59:34
写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}`;
}
};
两种方法，都可以实现
最新文章
- 【Swift学习】Swift编程之旅---方法（十五）
- C#项目””是针对”.NETFramework,Version=v4.5.2”但此计算机没有，需要修改为v4.5.1.
- snakeyaml - Documentation.wiki
- 什么是智能扫描开单打印进销存POS?安卓工业手持PDA设备上的POS销售开单,现场打印打票，用扫描枪太方便了
- Kafka安装及部署
- Gabor学习笔记
- 【FE前端学习】第二阶段任务-基础
- 使用Spring的注解方式实现AOP
- Eclipse c++环境搭建 并加载OpenCV库 2015最新
- 去掉display:inline-block元素间的多余空白
- a标签的背景图在ie8下显示问题
- haslayout和BFC
- android开发
- springmvc+mybatis+redis（转）
- 求第i个小的元素 时间复杂度O(n)
- 5、通过js代码设置css样式
- Jquery ajaxSubmit()的浏览器兼容问题
- AVFoundation 框架初探究（三）
- EBS预置文件作用收集整理
- phpstudy配置本地https