如何构建嵌套动态路由路径 解决列表跳转详情路由匹配失败问题

首先排查2个核心错误点：

1. 语法错误：你当前的tapOnPet方法中，路由路径字符串混用了单双引号，['./details", petName]会导致路由解析直接失败，先修正引号统一。
2. 相对路由依赖注入校验：确保PetListComponent中注入的ActivatedRoute是当前路由实例，而非根路由实例。

修复后的代码示例：

// PetListComponent 依赖注入部分
constructor(private _router: Router, private active: ActivatedRoute) {}

tapOnPet(petName: string) {
  this._router.navigate(
    ['details', petName],
    {
      relativeTo: this.active
    }
  );
}

额外校验点：确保进入PetListComponent时，父路由的:list动态参数已正确传值，比如路由路径已存在dogList/xxx或catList/xxx的完整结构，父路由匹配失败也会导致子路由跳转报错。

你需要将路由的每一段路径、动态参数依次拆分到数组中，不需要拼接字符串，示例如下：

// listVal 是你要传给:list参数的具体值，petName是传给:id参数的值
this._router.navigate([{
  outlets: {
    catOutlet: ['catList', listVal, 'details', petName],
    // 同理狗标签的跳转写法：
    // dogOutlet: ['dogList', listVal, 'details', petName]
  }
}]);

如果是在PetListComponent已加载的场景下跳转，也可以沿用相对路由写法简化：

this._router.navigate(
  ['details', petName],
  {
    relativeTo: this.active,
    outlet: 'catOutlet'
  }
);

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