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

作者站长头像
站长
· 阅读数 17

vue3项目 在组件内使用onBeforeRouteLeave进行页面拦截弹窗 已经进入判断 但是页面路径已经回退了 求解该如何让页面路径不回退补充问题:我是在弹窗组件内使用的onBeforeRouteLeave vue版本3.2.36

let leaveStatus = ref<number>(0);
let show = ref<boolean>(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);
回复
1个回答
avatar
test
2024-06-24

next(false) 改为 return false 试试。


看了一下你的补充内容,不生效是正确的,因为导航守卫只能在路由组件生效,你的弹窗肯定不是路由组件,所以会不生效answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容