Angular：如何管理特定树的 URL答案

【问题标题】：Angular : How to manage the URL of a particular treeAngular：如何管理特定树的 URL
【发布时间】：2021-09-14 20:03:31
【问题描述】：

我有一个文件夹主页。每个文件夹都包含一个待办事项列表，每个待办事项列表都包含具有自己页面的任务。这是三个（下）。显然，每个文件夹和每个任务都有一个 ID。

我有点迷失如何使用角度管理参数和嵌套路由。我正在考虑这样做，但我真的不确定这种方法，所以如果你能帮助我......

const routes: Routes = [
  { path: 'folders', component : FoldersListComponent},
  {
    path: 'folders/:id/tasks', 
    component : TodoListComponent,
    children: [
      {
        path: 'tasks/:id',
        component: SingleTaskComponent
      }
    ]
  }
];

【问题讨论】：

标签： angular url routes nested

【解决方案1】：

选项

在这种情况下，嵌套路由涉及更多的代码行。

将此代码块的可读性与您的示例以及我在本文底部的第二个代码块进行比较。

  { path: 'folders', component : FoldersListComponent },
  { path: 'folders/:folderId', component : TodoListComponent },
  { path: 'folders/:folderId/tasks/:taskId', component : SingleTaskComponent },

这是一个非常好的解决方案。另请注意，我两次使用了 folderId 和 taskId，而不是 id。这是因为您可能想要访问这些 id，并且记住 ActivatedRoute.snapshot.paramMap.get('id')) 获取您会有点混乱。

对您的示例的评论

为了完成您的示例，带有子项的路径不能拥有自己的组件（参考您声明 TodoListComponent 的位置）。您的示例将有 folder/3/tasks/tasks/4 这样的路由到 TodoList 组件。

此外，子路径是相对于其父路径的，因此要将任务路径设置为文件夹/3/tasks/1/，您只需输入“:id”即可，如下所示。

  { path: "folders", component: FoldersListComponent },
  {
    path: "folders/:id/tasks",
    children: [
      {
        path: ":id",
        component: SingleTaskComponent,
      },
      {
        path: '',
        pathMatch: 'full',
        component: TodoListComponent,
      }
    ],
  },

【讨论】：

谢谢，我会保留您的解决方案。只是从 SEO 的角度提出的一个问题：当您在待办事项列表中时，在 URL 中包含“任务”不是更好吗？
我对 SEO 不太熟悉，但是根据这个moz.com/learn/seo/url url 只是搜索引擎排名的一个次要因素