Vue Router中如何跳过onboarding路由下的最后一个子路由3

现有代码不生效的常见原因 #

• 逻辑没有放在正确的路由守卫位置：必须放在全局前置守卫、路由独享守卫或者onboarding父组件的beforeRouteEnter守卫内，放在其他位置不会触发路由跳转拦截
• 变量noCC的取值时机错误：守卫执行时noCC还未完成赋值，导致判断条件不触发
• 缺少全局守卫的默认放行逻辑：如果守卫内没有调用next()会导致路由阻塞，跳转逻辑无法正常执行

方案1：全局前置守卫实现（最常用） #

在router/index.js中路由实例创建完成后，添加如下逻辑：

// 假设你已经创建了router实例：const router = createRouter({...})
router.beforeEach((to, from, next) => {
  // 先处理你原有meta.requiresAuth的鉴权逻辑
  if (to.meta.requiresAuth && !你已登录的判断变量) {
    next('/login')
    return
  }

  // 处理跳过onboarding/3的逻辑
  const noCC = 你自己的判断条件 // 这里要确保取到的是最新的布尔值
  if (to.name === 'onboarding/3' && noCC) {
    next({ path: '/dashboard' })
    return
  }

  // 所有未命中跳转逻辑的场景必须正常放行
  next()
})

方案2：路由独享守卫实现（代码更聚合） #

直接修改你的路由配置，给onboarding/3路由添加独享守卫，不需要改全局逻辑：

path: "/onboarding",
name: "Onboarding",
component: Onboarding,
meta: { requiresAuth: true },
children: [
  { path: '1', name: "onboarding/1", component:..  },
  { path: '2', name: "onboarding/2", component:.. },
  { 
    path: '3', 
    name: "onboarding/3", 
    component:.. ,
    // 新增独享守卫
    beforeEnter: (to, from, next) => {
      const noCC = 你自己的判断条件
      if (noCC) {
        next('/dashboard')
        return
      }
      next()
    }
  } 
]

排查验证点 #

如果修改后依然不生效，可以按顺序排查：

1. 路由跳转时打印to.name，确认和判断条件里的onboarding/3完全匹配（大小写、斜杠都不能有差异）
2. 守卫执行时打印noCC的值，确认是你预期的true，而非undefined或false
3. 确认没有其他前置守卫逻辑先于这段代码执行了next()，导致你的跳转逻辑被覆盖

内容的提问来源于stack exchange，提问作者biillitil