Angular调用router.navigate后意外重定向至localhost:4200/#问题

问题原因 #

你使用的<a>标签设置了href="#"，点击时浏览器会触发默认的锚点跳转行为（定位到页面顶部，URL同步变为localhost:4200/#），这与Angular的路由跳转逻辑冲突，导致目标路由URL短暂显示后，立刻被浏览器的默认行为覆盖回根路径锚点。

解决方案 #

方案1：阻止默认事件（推荐） #

在点击事件中传入$event，调用preventDefault()禁用浏览器的默认跳转行为：

<a href="#" class="btn btn-primary" (click)="onCreateNew($event)">
  <i class="bi bi-plus"></i>
</a>

onCreateNew(event: Event){
  event.preventDefault();
  this.router.navigate(['newcard']);
}

方案2：修改href属性 #

将href="#"替换为href="javascript:void(0)"，直接取消默认跳转逻辑：

<a href="javascript:void(0)" class="btn btn-primary" (click)="onCreateNew()">
  <i class="bi bi-plus"></i>
</a>

方案3：使用Angular RouterLink指令（最佳实践） #

直接使用Angular内置的routerLink指令，这是框架推荐的路由跳转方式，无需手动编写跳转方法，同时天然避免默认行为冲突：

<a routerLink="/newcard" class="btn btn-primary">
  <i class="bi bi-plus"></i>
</a>

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