Angular子路由下routerLinkActive激活样式不生效问题

激活样式消失的核心原因是侧边栏导航项上配置的[routerLinkActiveOptions]="{exact: true}"。

• routerLinkActive指令默认使用前缀匹配规则：只要当前访问URL以routerLink绑定的路径为前缀，就会自动追加配置的激活样式类。
• 当显式设置exact: true后，匹配规则会切换为完全精确匹配：只有当前URL和routerLink绑定的路径完全相等时才会添加激活类，URL存在额外子路径段时就会判定为不匹配，自动移除激活类。

结合你的代码场景：Settings导航绑定的路径是/dashboard/settings，当跳转到任意子路由（比如/dashboard/settings/company-details、/dashboard/settings/team）时，URL比绑定路径多了子路由段，不满足精确匹配要求，sidebar-active类自然会消失。

直接删除导航标签上的[routerLinkActiveOptions]="{exact: true}"配置，恢复默认的前缀匹配逻辑即可。修改后只要处于/dashboard/settings及其所有子路由页面，侧边栏Settings导航项都会保持激活状态。

修复后的模板代码如下：

<a
  [routerLink]="['/dashboard/settings']" 
  [routerLinkActive]="['sidebar-active']"
  class="list-group-item border-0 d-inline-block ps-4 custom-nav-item mt-2">
  <i class="fa-light fa-sliders-simple custom-nav-item"></i>
  <span class="ps-2 custom-nav-item">Settings</span>
</a>

补充提示：如果项目中存在同前缀的其他路由（例如/dashboard/settings-center这类路径），前缀匹配可能导致误激活，这种场景可以通过给路由配置自定义data标记，再写简单的路由判断逻辑手动绑定激活类即可。你当前的路由结构不存在这类冲突，直接移除exact配置就能满足需求。

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