Angular路由：输入父URL默认子路由设置异常求助

嘿，这个坑我之前踩过！你现在的问题出在：只要CompetitionComponent初始化（或者路由参数变化），订阅params的代码就会强制跳转到overview，哪怕你已经在leaderboard或者submit子路由上，直接把当前的子路由给覆盖了。其实不用在组件里写冗余逻辑，直接在路由配置里就能完美解决，或者调整组件内的判断逻辑也行，给你两种实用方案：

方案一：路由配置层面设置默认子路由（推荐） #

这是Angular官方推荐的默认路由实现方式，代码更简洁也更符合路由设计逻辑，直接在children数组里加一个空路径的重定向规则：

{ 
  path:'c/:competId', 
  component: CompetitionComponent, 
  children: [ 
    // 新增这一行：匹配父路由的空子路径，重定向到overview
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path:'overview', component: CompetitionDescriptionComponent }, 
    { path:'leaderboard', component: CompetitionLeaderboardComponent }, 
    { path:'submit', component: CompetitionSubmitComponent } 
  ] 
}

为什么这个能行？ #

• path: ''专门匹配用户直接访问c/:competId（没有子路由）的场景
• pathMatch: 'full'确保只有当整个子路径为空的时候才触发重定向，完全不会干扰leaderboard、submit这些已有子路由的访问

方案二：调整组件内的重定向逻辑（如果一定要在组件里处理） #

如果你因为某些业务原因必须在CompetitionComponent里写逻辑，那可以通过判断当前是否已有子路由来决定是否重定向，避免覆盖已有子路由：

// 替换你原来的params订阅代码
this.activatedRoute.url.subscribe(urlSegments => {
  // 只有当没有子路由（urlSegments长度为0）时，才执行重定向
  if (urlSegments.length === 0) {
    const competId = this.activatedRoute.snapshot.params['competId'];
    // 用relativeTo更优雅，不用手动拼接路径
    this.router.navigate(['overview'], { relativeTo: this.activatedRoute });
  }
});

关键改进点： #

• 不再盲目监听params，而是监听当前路由的url段，判断是否存在子路由
• 使用relativeTo: this.activatedRoute，基于当前父路由导航，避免硬编码路径出错

为什么原来的代码会出问题？ #

当你访问c/xxx/leaderboard时，CompetitionComponent作为父组件仍然会初始化，你原来的params订阅代码会无条件执行导航，直接把当前的leaderboard子路由给覆盖了，这就导致不管访问哪个子路由都会跳去overview。

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