RouterLink跳转异常：路径叠加至当前路由，如何修复？

这是Angular路由里很常见的小坑，核心原因是你用了相对路径的RouterLink写法，导致路由总是基于当前激活的路径去拼接，自然就出现了home/mygames或者home/home这种嵌套路径。

问题根源 #

Angular的RouterLink默认行为是解析相对路径：当你在/home路由下时，[routerLink]="['mygames', user_ob.user_id]"会被理解为“在当前路由的基础上追加mygames和id”，所以最终变成/home/mygames/user_id；同理，如果你的Home路由链接写的是[routerLink]="['home']"，就会在/home基础上再追加home，得到/home/home。

快速修复方案 #

只需要在路由数组的开头加上一个斜杠/，明确告诉RouterLink从根路由开始解析，生成绝对路径：

<li class="treeview" routerLinkActive="active" >
  <a [routerLink]="['/mygames', user_ob.user_id]">
    <i class="fa fa-user"></i>
    <span>My Games</span>
  </a>
</li>

对应Home路由的链接也要改成绝对路径写法：

<!-- 错误的相对路径写法 -->
<!-- <a [routerLink]="['home']">Home</a> -->

<!-- 正确的绝对路径写法 -->
<a [routerLink]="['/home']">Home</a>

额外小提示 #

如果你更喜欢字符串形式的写法，也可以直接这样写，效果完全一致：

<a routerLink="/mygames/{{user_ob.user_id}}">My Games</a>

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