동적 하위 경로를 사용하여 vue 라우터를 정의하는 방법

동적 하위 경로를 사용하여 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

참조URL: https://stackoverflow.com/questions/66942573/how-to-define-vue-routers-with-dynamic-child-routes