如何通过编程方式带参数路由到辅助路由？

先确认路由配置正确性 #

首先确保你的路由模块中已经正确定义了辅助路由artistEditor，示例配置如下：

const routes: Routes = [
  // 主路由
  { path: 'albums/:id', component: AlbumsComponent },
  // 辅助路由（指定outlet）
  { path: 'artist/:id', component: ArtistEditorComponent, outlet: 'artistEditor' }
];

两种场景的正确写法 #

场景1：同时导航主路由+打开辅助路由

如果需要跳转到/albums/[albumId]的同时，在artistEditor辅助路由中加载artist/[artistId]，代码如下：

// 组件中注入Router和ActivatedRoute
constructor(private router: Router, private route: ActivatedRoute) {}

route(event: any) {
  const albumId = event.albumId; // 从子组件事件中获取albumId
  const artistId = event.artistId; // 从子组件事件中获取artistId

  this.router.navigate([
    '/albums', albumId,
    { outlets: { artistEditor: ['artist', artistId] } }
  ]);
}

核心是把主路由路径和辅助路由配置合并到同一个数组参数中，Angular会同时处理主路由和辅助路由的导航。

场景2：保持当前主路由不变，仅打开辅助路由

如果希望保留当前的主路由URL，只打开辅助路由浮层，需要指定relativeTo为当前激活的路由，和你HTML中routerLink的逻辑对齐：

route(event: any) {
  const artistId = event.artistId;

  this.router.navigate(
    [ { outlets: { artistEditor: ['artist', artistId] } } ],
    { relativeTo: this.route }
  );
}

你之前代码不生效的原因 #

你之前的写法this.router.navigate(url, outlet);错误在于：

• navigate的第二个参数是导航配置对象，不能直接传outlets对象
• 如果是相对路由场景，没有指定relativeTo，Angular会从根路由查找，导致找不到对应辅助路由

正确的修正方式是把outlets对象嵌套到第一个导航数组中，或者在配置对象中指定relativeTo。

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