Angular 15嵌套路由跳转异常：重定向后所有子路由标记为激活

问题分析 #

你遇到的核心问题是嵌套路由下相对路径解析错误：

• 第一次从父路由/profile点击route-1，相对路径route-1会被解析为/profile/route-1，跳转正常；
• 当已经在/profile/route-1页面时，再点击route-2，相对路径route-2会被解析为/profile/route-1/route-2（当前路由的子路径），而这个路由不存在，导致跳转失败；
• 跳转失败后路由状态异常，加上routerLinkActive默认的prefix匹配策略，导致所有按钮都被标记为激活状态；
• 控制台的relativeTo警告是Angular内部处理相对路径时的歧义提示，虽然你没手动用，但相对路径解析时自动触发了这个逻辑。

修复方案 #

方案1：改用绝对路径（最直接） #

把侧边栏按钮的routerLink改成绝对路径数组形式，确保不管当前在哪个子路由，都能跳转到正确的父级子路由：

<ion-button
  [routerLink]="['/profile', route.path]"
  routerLinkActive="active-item"
  [routerLinkActiveOptions]="{ exact: true }">
  {{ route.label }}
</ion-button>

• ['/profile', route.path]会生成/profile/route-1、/profile/route-2这类正确的绝对路径；
• 加上[routerLinkActiveOptions]="{ exact: true }"，确保只有完全匹配当前路由的按钮才会被标记为激活，避免全选问题。

方案2：绑定相对路由上下文（适合动态父路由场景） #

如果父路由路径可能变化（比如带参数），可以注入ActivatedRoute，让相对路径基于父路由解析：

1. 在侧边栏组件中注入ActivatedRoute：

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {}

2. 修改按钮的routerLink和relativeTo绑定：

<ion-button
  [routerLink]="[route.path]"
  [relativeTo]="activatedRoute.parent"
  routerLinkActive="active-item"
  [routerLinkActiveOptions]="{ exact: true }">
  {{ route.label }}
</ion-button>

• [relativeTo]="activatedRoute.parent"指定相对路径基于父路由/profile解析，而非当前子路由；
• 同样加上精确匹配选项，解决全激活问题。

额外验证 #

• 修复后测试跳转：从/profile/route-1点击route-2，应该直接跳转到/profile/route-2，且只有对应按钮激活；
• 控制台的relativeTo警告会自动消失，因为路径解析不再有歧义。

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