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

我正在尝试这样的东西

{
    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"),
}

---

如何解决第一段代码？

您应该从子路由路径中删除带前缀的斜杠：

path: ":username",

或尝试：

path: "user/:username",

---

然后您可以访问url，如

/portfolio/user/john

只是一个反问，当用户希望访问

/portfolio

路径（没有任何特定用户名）时，最好的解决方案是什么？它会重定向到

ProfileLayout

组件，该组件可能有指向所有配置文件的链接。请回答这个问题？