Angular多级子路由跳转路径异常问题咨询

问题根源 #

你的代码中，this.activeRoute指向的是component1层级的路由节点，直接传入[selectedId]会让Angular将ID追加到component1路径后，而非期望的component1/management下。

解决方案 #

根据当前组件所在的路由层级，选择以下任一写法：

场景1：当前组件在Component1Management内（比如管理列表页） #

此时activeRoute已经指向component1/management节点，只需用相对路径追加ID：

// 写法1：用`.`明确指向当前路由节点
this.router.navigate(['.', selectedId], { relativeTo: this.activeRoute });

// 写法2：直接基于当前路由节点（等价于写法1）
this.router.navigate([selectedId], { relativeTo: this.activeRoute });

场景2：当前组件在Component1或其他上层组件内 #

需要明确指定management路径段，再追加ID：

this.router.navigate(['management', selectedId], { relativeTo: this.activeRoute });

备选：使用绝对路径（灵活性差，不推荐） #

如果相对路径不好控制，也可以直接写全路径：

this.router.navigate(['/component1/management', selectedId]);

验证路由配置 #

你的现有路由结构已经正确，management的子路由:id确实指向Component1Management，无需修改：

{
  path: 'management',
  component: Component1Management,
  children: [
    {
      path: ':id',
      component: Component1Management,
    },
  ],
}

内容的提问来源于stack exchange，提问作者Groomer