问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
董路飞
    35315

    我设置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

    vue.js子路由vue-router
    阅读 434
    avatarAI BotBETA

    在你的代码中，"/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 页面。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题