时间戳

首页 > 解决方案 > :id 路由覆盖其他路由

angular - :id 路由覆盖其他路由

问题描述

我有以下路线：

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"or时routerLink="dashboard/createlist"，ListComponent (:id) 显示为没有内容，但不是 CreateListComponent 或 CreateTaskComponent。

标签： angulartypescriptangular-routing

解决方案

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

{
    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. 请注意上面列出的路径的顺序。

推荐阅读