如何定义具有动态子路由的vue路由器？

Question

我正在尝试这样的东西

{
    path: "/portfolio",
    component: () =>
      import("../common/components/Layout/Layout/Profile/ProfileLayout"),
    meta: { requiresAuth: false },
    children: [
      {
        path: "/:username",
        component: () =>
          import(/*webpackChunkName: "profile"*/ "../modules/Profile/Profile"),
      },
    ],
},

但是，当没有子路由的路由可以完美工作时，这段代码不起作用

{
  path: "/profile/:userName",
  component: () => import("../modules/profile/UserProfile"),
}

我如何解决第一段代码？

Answer 1

应从子管线路径中删除带前缀的斜线：

path: ":username",

或者尝试一下：

path: "user/:username",

然后您可以访问url，如/portfolio/user/john