1

I am trying something like this

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

But the piece of code is not working while routes without child routes working perfectly

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

how can i solve the first piece of code ?

Osman Rafi
  • 938
  • 1
  • 16
  • 37

1 Answers1

1

You should remove the prepended slash from the child route path :

path: ":username",

or try out :

path: "user/:username",

then you could visit the url like /portfolio/user/john

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • just a counter question, what's the best solution when a user wants to visit on `/portfolio` path (without any specific user name)? – Osman Rafi Apr 04 '21 at 15:29
  • 1
    that redirects to `ProfileLayout` component which could have links to all profiles – Boussadjra Brahim Apr 04 '21 at 15:34
  • can you please answer this question ? https://stackoverflow.com/questions/67091419/how-to-set-up-vue-cors-for-different-domain-api?noredirect=1#comment118592679_67091419 – Osman Rafi Apr 14 '21 at 16:17