求解:vue3项目onBeforeRouteLeave拦截不生效 页面路径依然回退?-灵析社区

周舟莫UI设计

vue3项目 在组件内使用`onBeforeRouteLeave`进行页面拦截弹窗 已经进入判断 但是页面路径已经回退了 求解该如何让页面路径不回退 补充问题:我是在弹窗组件内使用的onBeforeRouteLeave vue版本3.2.36 let leaveStatus = ref(0); let show = ref(false); onBeforeRouteLeave((to, from, next) => { console.log('leaveStatus=', leaveStatus.value, leaveStatus.value++ ) // 模拟挽留 if (leaveStatus.value == 1 && sessionStorage.getItem('type') == 'back') { show.value = true; leaveStatus.value += 1; next(false); }else{ leaveStatus.value = 0; show.value = false; leaveStatus.value = 0; next(true); } }); 尝试了不同的写法 依然不行 const beforeLeave = (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => { if (leaveStatus.value === 0 && sessionStorage.getItem('type') === 'back') { console.log('触发') show.value = true leaveStatus.value += 1 next(false) } else { console.log('触发1') show.value = false leaveStatus.value = 0 next(true) } } onBeforeRouteLeave(beforeLeave);

阅读量:15

点赞量:0

问AI
把 "next(false)" 改为 "return false" 试试。 *** 看了一下你的补充内容,不生效是正确的,因为导航守卫只能在路由组件生效,你的弹窗肯定不是路由组件,所以会不生效"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/f84b2c6432e4c3a2ae1f28ec97ec54f3.png)