Angular路由在HostListener/popstate事件（浏览器后退）中失效求助

问题原因 #

直接在popstate事件中调用router.navigate()会和浏览器的历史栈操作冲突：当用户点击后退按钮触发popstate时，浏览器已经在修改历史记录，此时调用navigate()会新增一条历史条目，不仅可能导致导航被Angular的路由机制忽略，还会引发后续后退操作的循环问题。

解决方案 #

通过两个关键调整解决问题，修改后的代码如下：

import { Router } from '@angular/router';
import { HostListener, Component } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private router: Router) {}

  @HostListener('window:popstate', ['$event'])
  onPopState(event: Event) {
    event.preventDefault();
    // 带斜杠的绝对路径确保导航目标准确，replaceUrl参数替换当前历史记录而非新增
    this.router.navigate(['/user-list'], { replaceUrl: true });
  }
}

额外注意事项 #

• 如果user-list是子路由，需要根据实际路由配置调整路径，比如['/parent-route/user-list']
• 不要在多个组件中同时监听window:popstate，否则会引发路由逻辑冲突

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