Question

我有一个代码，其中路由器配置如下：

  {
    path: 'users',
    component: UsersComponent,
    children: [
      {
        path: 'add',
        component: AddUserComponent
      }
    ]
  }

我希望有两页：

/ users - 显示用户列表
/ users / add - 显示添加新用户的表单

但我不知道嵌套router-outlet标签的内容。这两个页面我想在同一个主容器中呈现app-root。我知道我可以这样做：

  {
    path: 'users',
    component: UsersComponent
  },
  {
    path: 'users/add',
    component: AddUserComponent
  }

但你可能同意我的观点，这不是一个好的解决方案，使用儿童建筑会很好。

我该怎么做？

Answer 1

如果您没有为路线分配组件，则您不需要嵌套路线=＆gt;只是不要将组件添加到users路由的定义中，并为列表页面创建一个专用的空路径：

  {
    path: 'users',
    children: [
      {
        path: '',
        component: UsersComponent
      },
      {
        path: 'add',
        component: AddUserComponent
      }
    ]
  }

这里有一个缺点：如果你在routerLink内使用UsersComponent，你将使用相对路径，那么空路径仍将作为路径运行。所以你需要使用类似于../add而不是./add的相对路径，因为通常人们会认为

Answer 2

检查此代码：

{
    path: 'users',
    component: UsersComponent,
    children: [
      {
        path: '',
        component: UsersComponent
      },
      {
        path: 'add',
        component: AddUserComponent
      }
    ]   
}

使用子路由，但不要在路由器插座中呈现它们

2 个答案: