Angular中routerlink点击始终跳转至根路径问题求助

核心问题1：独立组件未导入RouterModule #

你的SideMenuComponent是独立组件，但未导入RouterModule，导致routerLink指令无法被Angular识别。此时点击带有href="#"的a标签，浏览器会默认触发根路径跳转行为。

修复代码： #

修改side-menu.component.ts，添加RouterModule的导入：

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-side-menu',
  standalone: true,
  imports: [RouterModule],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.scss'
})
export class SideMenuComponent {

}

核心问题2：移除干扰性的href="#" #

即使导入了RouterModule，href="#"仍可能干扰路由跳转逻辑，建议直接移除该属性：
修改side-menu.component.html：

<li>
  <a routerLink="/user/dashboard" class="nav-link link-body-emphasis">
    <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
    Dashboard
  </a>
</li>
<li>
  <a routerLink="/user/teams" class="nav-link link-body-emphasis">
    <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
    My Teams
  </a>
</li>

额外优化：修复路由重定向拼写错误 #

你的user.routes.ts中重定向路径存在拼写错误（dashbaord应为dashboard），虽然不影响当前RouterLink问题，但会导致访问/user时无法正确重定向到仪表盘组件：

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'dashboard',
} 

验证修复 #

完成上述修改后，点击侧边菜单链接即可正确跳转到/user/dashboard和/user/teams路径，不会再回到根路径。

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