Question

Wassup 伙计们

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

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

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

试试这个

 {
  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

Vue Router：嵌套动态路由

1 个答案: