:id 路由覆盖其他

Question

我有以下路线：

const routes: Routes = [

  { path: '', component: UserComponent, children: [
      { path: '', component: LoginComponent },
      { path: 'signup', component: SignupComponent }
    ]},
  { path: 'dashboard', component: MainComponent, children: [
      { path: '', component: DashboardComponent, children: [
          { path: '', redirectTo: '0', pathMatch: 'full' },
          { path: '0', component: NoListComponent },
          { path: ':id', component: ListComponent },
        ]},
      { path: 'createlist', component: CreateListComponent },
      { path: 'create', component: CreateTaskComponent }
    ]},
];

当我调用 routerLink="dashboard/create" 或 routerLink="dashboard/createlist" 时，ListComponent (:id) 显示为没有内容，但 CreateListComponent 或 CreateTaskComponent 没有显示。

Answer 1

您需要更改路由配置，如下所示：

{
    path: 'dashboard',
    component: MainComponent,
    children: [{
        path: '',
        component: DashboardComponent,
        children: [{
                path: '',
                redirectTo: '0',
                pathMatch: 'full'
            },
            {
                path: '0',
                component: NoListComponent
            },
            {
                path: 'createlist',
                component: CreateListComponent
            },
            {
                path: 'create',
                component: CreateTaskComponent
            },
            {
                path: ':id',
                component: ListComponent
            }
        ]
    }]
}

这是必需的，因为 /createlist 和 /create 都是 /dashboard 的 children。请注意上面列出的路径的顺序。

Answer 2

您的路线对于 angular 来说有点混乱。当您调用 /dashboard/create 时，angular 认为您正试图通过将 id 值设置为 "create" 来达到 /dashboard/:id。您的路径应该是唯一的，并且不容易产生歧义。

我会这样声明

{ path: '', component: DashboardComponent, children: [
          { path: '', redirectTo: 'no-list', pathMatch: 'full' },
          { path: 'no-list', component: NoListComponent },
          { path: 'list/show/:id', component: ListComponent },
          { path: 'list/createlist', component: CreateListComponent },
          { path: 'list/createtask', component: CreateTaskComponent },
]}

Answer 3

以上回答都对，我只是想澄清一件事。当涉及到路由时，订单很重要。所以你需要把 /createlist 和 /create 放在 :id

之前

{
  path: 'dashboard', component: MainComponent, children: [
    {
      path: '', component: DashboardComponent, children: [
        { path: '', redirectTo: '0', pathMatch: 'full' },
        { path: 'createlist', component: CreateListComponent },
        { path: 'create', component: CreateTaskComponent },
        { path: '0', component: NoListComponent },
        { path: ':id', component: ListComponent }
      ]
    },

  ]
},

如果将它们放在 :id 之后，它将覆盖它们，因为 :id 将匹配 /dashboard

之后的任何嵌套路由

:id 路由覆盖其他

:id Route overwrites others

typescript

angular-routing

angular