Vue Router：嵌套的动态路由

Question

Wassup伙计们，

目前我正在与 Vuex Store 一起开发 vue-router。 但是，我有一条路线，其中包含两个动态参数（：id，：templateId）。

我的问题是，我需要在我的路线中定义什么，才能使用这个嵌套的动态 url。 通常我只是一级路线。

索引.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

尝试这个

 {
  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,
    },
  ],
}

在 codepen 中演示