路由守卫抛出错误怎么办？教你利用 onError 捕获全局跳转异常-Vue.js-PHP中文网

路由守卫中抛出错误会中断导航并可能引发白屏，Vue Router 提供 router.onError 全局钩子统一捕获 beforeEach、beforeEnter 等守卫中的同步异常或 Promise 拒绝，支持错误上报、跳转错误页等处理，需在 createRouter 后、app.use(router) 前注册，且须确保异步守卫中 Promise 被正确 await 或 catch。

路由守卫抛出错误怎么办？教你利用 onerror 捕获全局跳转异常

路由守卫中抛出错误会导致导航中断、白屏或控制台报错，但 Vue Router 提供了 onError 全局钩子来统一捕获和处理这类异常，避免应用崩溃。

什么是路由守卫中的错误？

在 beforeEach、beforeEnter 或组件内守卫（如 beforeRouteEnter）中，如果同步抛出错误（throw new Error(...)），或异步操作（如 API 调用）被拒绝（Promise.reject()），就会触发导航失败。此时 Vue Router 不会自动处理，错误会冒泡到全局，可能阻塞后续跳转。

用 `router.onError` 捕获所有跳转异常

在创建路由实例后，调用 router.onError() 注册一个错误处理器，它会在任何守卫抛错时被调用，参数是错误对象：

确保在 createRouter 之后、app.use(router) 之前注册
错误对象通常包含 message、stack，也可能携带自定义属性（比如你 throw { code: 'AUTH_REQUIRED' }）
常见用途：上报错误、跳转到错误页、提示用户、恢复导航（需手动调用 next() 或 router.push()）

示例：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

const router = createRouter({ ... })

router.onError((error) => {
  console.error('路由跳转异常:', error)
  
  if (error?.code === 'AUTH_REQUIRED') {
    router.push('/login')
  } else if (error?.name === 'NavigationFailure') {
    // 忽略已知的导航失败（如重复跳转）
  } else {
    router.push('/500')
  }
})

app.use(router)