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 中演示