如何捕获Vue Router生成组件Props时的路由错误？

在Vue Router v3中，路由配置的props函数内抛出的错误无法被onError或beforeEach捕获——因为该执行场景不在onError官方文档列出的覆盖范围内（路由守卫同步/异步错误、异步组件解析错误）。props函数是在路由匹配成功后、组件实例化前执行的，属于组件Props注入阶段，未被路由守卫的错误捕获机制覆盖。

方法1：在props函数内部手动捕获错误 #

直接在props函数里用try-catch包裹参数解析逻辑，灵活处理错误（比如跳转错误页面、返回错误信息给组件）：

{
  path: "/test/:parameter",
  name: "test",
  component: Test,
  props: (route) => {
    try {
      return { url: new URL(route.params.parameter) };
    } catch (err) {
      // 方案A：跳转至错误页面
      router.push({ name: "error", query: { msg: "无效的URL参数" } });
      // 方案B：返回错误信息给组件，由组件自行处理
      return { url: null, error: err.message };
    }
  },
}

优点：针对性强，仅处理当前路由的Props解析错误；缺点：需逐个路由配置，无法全局统一处理。

方法2：利用Vue全局错误处理器捕获 #

通过Vue.config.errorHandler全局监听组件渲染阶段的错误，包含Props注入时的异常：

Vue.config.errorHandler = function (err, vm, info) {
  // 通过info判断是否为Props解析错误
  if (info.includes("props")) {
    console.error("Props解析失败:", err);
    // 统一跳转错误页面
    router.push({ name: "error" });
  }
};

也可以用window.onerror捕获更底层的全局错误：

window.onerror = function (message, source, lineno, colno, error) {
  if (error?.message.includes("Invalid URL")) {
    console.error("路由参数转URL失败:", error);
    router.push({ name: "error" });
  }
};

优点：全局统一处理，无需逐个路由修改；缺点：需通过错误信息/上下文判断错误类型，存在误判可能。

方法3：提前在路由守卫中验证参数 #

将参数验证逻辑移至路由守卫beforeEnter中，利用onError能捕获路由守卫错误的特性，提前拦截无效参数：

{
  path: "/test/:parameter",
  name: "test",
  component: Test,
  beforeEnter: (to, from, next) => {
    try {
      // 提前验证参数有效性
      new URL(to.params.parameter);
      next();
    } catch (err) {
      // 通过next(err)抛出错误，触发onError捕获
      next(new Error("无效的URL参数"));
    }
  },
  props: (route) => ({
    url: new URL(route.params.parameter),
  }),
}

同时配置onError捕获该错误：

router.onError((err) => {
  console.error("路由错误:", err.message);
  router.push({ name: "error" });
});

优点：复用Vue Router原生错误捕获机制，统一管理错误；缺点：参数验证逻辑与props函数内重复，需维护两处代码。

补充：处理"路由不存在"的情况 #

路由未匹配时，Vue Router默认不会抛出错误，需通过以下方式处理：

1. 配置通配符路由：

{
  path: "*",
  name: "notFound",
  component: NotFoundComponent,
}

2. 或者在afterEach中检查路由匹配结果：

router.afterEach((to) => {
  if (to.matched.length === 0) {
    console.error("路由不存在:", to.fullPath);
    router.push({ name: "notFound" });
  }
});

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