Vue Router 4 嵌套404路由重定向规则不生效问题求助

• 核心原因：带子路由的父路由对应的组件未渲染<RouterView />出口，会导致所有子路由匹配规则不生效，父路由下的所有子路径都会跳过子路由匹配逻辑，直接落到最外层的通配规则。
• 次要原因：子路由中的通配符:pathMatch(.*)*无法匹配父路由根路径（如/projects、/about）对应的空子路径段，这类空路径只能被path: ''的子路由或父路由级别的重定向规则命中。
• 稳定性问题：子路由通配规则中使用相对路径重定向，在部分场景下会出现路径解析错误，改用绝对路径可以完全避免这类问题。

const routes: Array<RouteRecordRaw> = [
  {
    path: "/projects",
    // 注意：该组件模板内必须包含 <RouterView /> 作为子路由渲染出口
    component: {},
    // 精确匹配 /projects 时直接重定向到默认页
    redirect: "/projects/extensions",
    children: [
      { path: "extensions", component: {} },
      { path: "themes", component: {} },
      // 匹配 /projects 下所有不存在的非空子路径，重定向到默认页
      { path: ":pathMatch(.*)*", redirect: "/projects/extensions" },
    ],
  },
  {
    path: "/about",
    // 注意：该组件模板内必须包含 <RouterView /> 作为子路由渲染出口
    component: {},
    // 精确匹配 /about 时直接重定向到默认页
    redirect: "/about/experience",
    children: [
      { path: "experience", component: {} },
      { path: "documents", component: {} },
      // 匹配 /about 下所有不存在的非空子路径，重定向到默认页
      { path: ":pathMatch(.*)*", redirect: "/about/experience" },
    ],
  },
  // 匹配所有根路径下未命中的一级路径，重定向到默认页
  { path: "/:pathMatch(.*)*", redirect: "/projects/extensions" },
];

• 父路由级别的redirect会在路径精确匹配父路由路径、且没有命中任何具体子路由时触发，解决访问/projects、/about根路径无法触发重定向的问题。如果不想在父路由配置重定向，也可以在每个children数组的最顶部添加{ path: '', redirect: '对应默认页绝对路径' }，效果完全一致。
• 子路由内的通配规则仅处理父路由下带后缀的不存在路径，重定向改用绝对路径避免相对路径解析异常。
• 路由匹配优先级遵循「更具体路径优先」原则，已存在的子路由（如/projects/themes、/about/documents）不会被父级重定向规则影响，可以正常访问。

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