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

  • Z时代
  • 2024-02-19
  • 分类：IT

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);

回答：

把 next(false) 改为 return false 试试。

看了一下你的补充内容，不生效是正确的，因为导航守卫只能在路由组件生效，你的弹窗肯定不是路由组件，所以会不生效求解:vue3项目onBeforeRouteLeave拦截不生效 页面路径依然回退？

以上是 求解:vue3项目onBeforeRouteLeave拦截不生效 页面路径依然回退？ 的全部内容， 来源链接： utcz.com/p/935213.html

回到顶部