Angular空路径路由非当前页仍显示激活状态问题排查修复

这个异常的核心原因是：路由配置里的pathMatch: 'full'仅生效于路由跳转阶段的路径匹配逻辑，不会自动作用于模板中routerLinkActive指令的激活状态判断规则，按以下步骤调整即可解决：

• 首先确认路由配置正确性，保留你已经添加的pathMatch: 'full'配置，空路径路由参考如下写法，注意路由顺序：优先级高的具体路径路由放在数组靠前位置，空路径、通配符路由放在末尾：

const routes: Routes = [
  // 其余业务路由，比如/dashboard、/user-list这类写在前面
  {
    path: '',
    component: LoginComponent,
    pathMatch: 'full'
  },
  // 404/重定向通配符路由放最后
  { path: '**', redirectTo: '' }
];

• 最容易漏配的项：在模板中对应空路径的导航链接上，给routerLinkActive添加精确匹配配置，这是导致其他页面下空路径路由始终被标记为active的核心原因：

<!-- 错误写法：空路径是所有URL的前缀，默认匹配规则下所有页面都会触发激活状态 -->
<a routerLink="/" routerLinkActive="active">登录页</a>

<!-- 正确写法：仅当URL完全匹配根路径/时，才会标记为激活状态 -->
<a 
  routerLink="/" 
  routerLinkActive="active"
  [routerLinkActiveOptions]="{exact: true}"
>
  登录页
</a>

特殊场景注意：如果你的空路径是承载子路由的父级路由，不要给父级空路径加pathMatch: 'full'，否则子路由会无法命中；这种场景下仅需要给对应导航项的routerLinkActive添加上述精确匹配配置即可。

• 异常排查：如果完成以上配置后问题仍然存在，检查是否存在其他优先级更高的空路径无组件路由、重定向路由提前命中，导致路由状态树中空路径节点始终处于激活状态，调整路由顺序即可。

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