Angular中为何非默认路由也会被应用routerLinkActive CSS类？

问题原因 #

Angular的routerLinkActive指令默认采用前缀匹配策略——"/"是所有路由路径的共同前缀，所以当你访问/messages或/profile这类子路由时，routerLink="/"的元素也会被判定为路径匹配，从而自动添加上activeLink类。

修正方案 #

1. 给默认路由的链接添加精确匹配选项 #

在Home的<a>标签上添加routerLinkActiveOptions="{ exact: true }"，强制要求路由路径完全匹配才激活样式：

<a routerLink="/" routerLinkActive="activeLink" [routerLinkActiveOptions]="{ exact: true }">
    <span>Home</span>
</a>

<a class="messages" routerLink="/messages" routerLinkActive="activeLink">
    <span>Messages</span>
</a>

<a class="profile" routerLink="/profile" routerLinkActive="activeLink">
    <span>Profile</span>
</a>

2. 优化路由配置（可选） #

同时建议给默认路由配置pathMatch: 'full'，确保只有当路径完全为空时才匹配HomeComponent，避免路由配置层面的潜在匹配问题：

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full'},
    { path: 'messages', component: MessagesComponent },
    { path: 'profile', component: ProfileComponent },
];

两者结合使用可以彻底解决路由匹配和样式激活的异常问题。

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