Angular12结合AdminLTE3实现子菜单时点击主菜单跳回首页如何解决

你的猜测是正确的，问题确实由主菜单a标签的href="#"属性导致。Angular路由机制会将#识别为路由跳转指令，点击后会触发页面导航到默认根路由（也就是首页），同时阻断AdminLTE自带的下拉展开事件，无法正常显示子菜单。

提供三种可行的修复方式，任选其一即可：

• 方式1：替换href="#"为href="javascript:void(0)"
  这是成本最低的修改方式，不会触发任何路由跳转行为，同时保留a标签的原生交互特性，AdminLTE的下拉事件可以正常触发。
• 方式2：添加点击事件阻止默认跳转
  保留原有href="#"属性，新增Angular点击事件修饰符阻止默认跳转行为：

  <a href="#" class="nav-link" (click)="$event.preventDefault()">
  

• 方式3：将a标签替换为div标签
  因为主菜单不需要跳转功能，直接用div替代a标签，添加相同的nav-link类即可，天生没有跳转属性，不影响下拉交互。

<li class="nav-item">
  <a href="javascript:void(0)" class="nav-link">
    <i class="nav-icon fas fa-th"></i>
    <p>
      School Admin
      <i class="right fas fa-angle-left"></i>
    </p>
  </a>
  <ul class="nav nav-treeview">
    <li class="nav-item">
      <a [routerLink]="['/access']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>User Access Overview</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/users']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Users</p>
      </a>
    </li>
    <li class="nav-item">
      <a [routerLink]="['/role']" routerLinkActive="active" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
        <p>Role</p>
      </a>
    </li>
  </ul>
</li>

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