Angular 14：直接URL路由正常但routerLink跳转失效求助

问题根源 #

你的routerLink路径未匹配路由配置的层级结构：所有用户相关子路由都嵌套在profile父路由下，但你使用的routerLink未包含profile前缀（或未用正确的相对路由写法），导致Angular无法匹配对应路由，最终导航异常回退到ProfileComponent。

正确的routerLink写法 #

根据使用场景分两种情况：

1. 在根组件（AppComponent）中使用 #

必须用绝对路径包含profile父路由，写法如下：

• 跳转至ProfileDetailsComponent：

  [routerLink]="['/profile', 'specialUser']"
  

• 跳转至ListComponent：

  [routerLink]="['/profile', 'specialUser', 'coolList']"
  

• 跳转至PlaceComponent：

  [routerLink]="['/profile', 'specialUser', 'coolList', 'neatPlace']"
  

2. 在ProfileComponent内部使用 #

已处于profile路由上下文下，可直接用相对路径，无需前缀：

• 跳转至ProfileDetailsComponent：

  [routerLink]="['specialUser']"
  

• 跳转至ListComponent：

  [routerLink]="['specialUser', 'coolList']"
  

• 跳转至PlaceComponent：

  [routerLink]="['specialUser', 'coolList', 'neatPlace']"
  

额外注意事项 #

• 不要给routerLink路径加末尾斜杠（比如['specialUser/']），Angular路由会自动处理路径格式，多余斜杠可能导致匹配异常。
• 若问题仍存在，检查是否有路由守卫（CanActivate/CanLoad等）拦截导航，或是否有其他代码调用router.navigate触发了重定向。

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