vue.js - 如何正确设置Vue.js路由以渲染不同的404页面?

Question

我设置3个一级路由，然后想在这3个一级路由的子路由下渲染各自不同的404页面。404路径匹配不对

const routes = [  {    path: "/",    name: "home",    component: () => import("@/components/HelloWorld.vue"),  },  {    path: "/b",    name: "b",    component: () => import("@/views/b/index.vue"),    children: [      {        path: "b1",        name: "b1",        component: () => import("@/views/b/b1.vue"),      },      {        path: "/:pathMatch(.*)*",        name: "BNotFound",        component: () => import("@/views/b/BNotFound.vue"),      },    ],  },  {    path: "/c",    name: "c",    component: () => import("@/views/c/index.vue"),    children: [      {        path: "c1",        name: "c1",        component: () => import("@/views/c/c1.vue"),      },      {        path: "/:pathMatch(.*)*",        name: "CNotFound",        component: () => import("@/views/c/CNotFound.vue"),      },    ],  },  {    path: "/:pathMatch(.*)*",    name: "NotFound",    component: () => import("@/views/NotFound.vue"),  },]

为什么我访问"/c/c2"路径时，匹配到的是B的404页面即 BNotFound，而不是 CNotFound。如何改正？

AI 回答的不对，我用的是最新的 vue-router 版本 4.3.0。（我已经知道解决方法了，就在之前方式加点东西搞定各种情况下的不同404页面 ）
报错：vue-router.js?v=36532544:975 Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

Answer 1

在你的代码中，"/c/c2" 这个路径确实可能被 B 的 404 页面匹配，因为在路由规则中，":pathMatch(.)" 是一个通配符，会匹配所有未明确指定的路径。由于这个规则在 B 的子路由中定义，所以当访问 "/c/c2" 时，它首先尝试匹配 B 的子路由，然后匹配到了这个通配符规则。

要解决这个问题，你需要确保每个一级路由的子路由都有自己的 404 页面，并且这些 404 页面的路径规则应该放在子路由的最后，以确保只有当其他所有子路由都无法匹配时，才会匹配到 404 页面。同时，这些 404 页面的路径规则应该避免使用通配符，以防止它们意外地匹配到其他路由。

以下是修改后的路由配置：

const routes = [  {    path: "/",    name: "home",    component: () => import("@/components/HelloWorld.vue"),  },  {    path: "/b",    name: "b",    component: () => import("@/views/b/index.vue"),    children: [      {        path: "b1",        name: "b1",        component: () => import("@/views/b/b1.vue"),      },      {        path: "b2", // 假设这是另一个有效的子路由        name: "b2",        component: () => import("@/views/b/b2.vue"),      },      // 其他有效的子路由...      {        path: "*", // 匹配所有其他未明确指定的子路由        name: "BNotFound",        component: () => import("@/views/b/BNotFound.vue"),      },    ],  },  {    path: "/c",    name: "c",    component: () => import("@/views/c/index.vue"),    children: [      {        path: "c1",        name: "c1",        component: () => import("@/views/c/c1.vue"),      },      {        path: "c2", // 假设这是另一个有效的子路由        name: "c2",        component: () => import("@/views/c/c2.vue"),      },      // 其他有效的子路由...      {        path: "*", // 匹配所有其他未明确指定的子路由        name: "CNotFound",        component: () => import("@/views/c/CNotFound.vue"),      },    ],  },  {    path: "*", // 匹配所有其他未明确指定的路径    name: "NotFound",    component: () => import("@/views/NotFound.vue"),  },]

在这个修改后的配置中，每个一级路由的子路由都有自己的 404 页面，这些页面的路径规则为 "path: '*'"，意味着它们会匹配所有其他未明确指定的子路由。这样，当你访问 "/c/c2" 时，由于它无法匹配到 C 的任何有效子路由，所以会被 C 的 404 页面匹配到，而不是 B 的 404 页面。