Vue Router: Nested Dynamic Routes

Question

Wassup Guys,

Currently I am working on the vue-router together with the Vuex Store. However, I have a route, that contains two dynamic parameters (:id, :templateId).

My Question is, what I need to define in my routes, in order to use this nested dynamic url. Normally I just a level one route.

index.ts

---

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    // as of now there are no public and private routes
    redirect: '/login',
  },
  {
    path: '/login',
    component: LoginField,
  },
  {
    path: '/features',
    component: FeaturePage,
    children: [
      {path: ':id', component: FeaturePage, props: true}
    ]
  },
  {
    path: '/features/:id/template/:templateId',
    component: TemplatePage,
  },
  {
    path: '/notFound(.*)',
    redirect: '/features',
  },
  
];

Answer 1

try this

 {
  path: "/features/:id",
  component: FeaturePage, // FeaturePage should route-view to contain child router
  children: [
     // FeaturePage should route-view to contain child router
     // it is a infinite loop 
     // dont use FeaturePage in this route
    // { path: "", component: FeaturePage, props: true },
    { path: "other-path/:prop", component: OtherPage, props: true },
    {
      path: "template/:templateId",
      component: TemplatePage,
      props: true,
    },
  ],
}

demo in codepen