右键新标签打开导航项后，选中项下划线状态异常求助

问题出在你手动给Home按钮加了静态的active类，导致不管当前路由是什么，它都会保持激活样式。正确的做法是利用Angular路由的内置指令来动态匹配当前路由并自动切换激活状态，步骤如下：

1. 移除静态的active类
   删除Home按钮上的class="active"，不再硬编码激活状态。

2. 使用routerLinkActive指令动态添加激活类
   在每个带routerLink的<a>标签上添加routerLinkActive属性，指定激活时要添加的类名（比如active-link），这样Angular会自动根据当前路由给匹配的导航项加上这个类。

3. 调整CSS选择器适配新的类结构
   因为激活类现在会加到<a>标签上，所以要修改SCSS选择器，确保样式能正确作用到内部的按钮上。

修改后的代码 #

HTML部分

<div>
  <ul>
    <a routerLink="/home" routerLinkActive="active-link">
      <button data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab" routerLinkActive="active-link">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

SCSS部分

.active-link button {
    border-bottom-color: #f48024!important;    
}

额外优化：精确匹配路由 #

如果你的导航项存在子路由（比如/home/detail），不想让父路由/home在子路由时也保持激活，可以添加routerLinkActiveOptions开启精确匹配：

<a routerLink="/home" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">

这样处理后，不管是正常点击导航，还是右键新标签打开，新页面加载时都会自动识别当前路由，给对应的导航项加上激活样式，Home项不会再固定显示下划线。

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