Angular中router.navigate相对路由跳转总是返回首页问题求助

问题复现 #

从子路由/account/account-settings/target返回父路由/account/account-settings时，使用router.navigate会触发NavigationCancel，提示Navigation ID xx is not equal to the current navigation id xx，最终被重定向到首页；但用router.navigateByUrl或原生<a>标签跳转则完全正常。

核心原因 #

这个错误本质是同时触发了多个导航请求，Angular的路由系统会自动取消旧的导航，只保留最新的请求，导致原本的返回父路由操作被中断。常见场景包括：

• 组件内多次调用router.navigate（比如点击事件、订阅回调、生命周期钩子重复触发）
• 路由守卫（CanActivate/CanDeactivate等）内部触发了额外的重定向操作
• 相对路由使用错误，导致导航目标被意外修改

解决方案 #

1. 修正相对路由写法

返回父路由时，正确的相对路由应该用../而不是空数组：

// 正确写法：从子路由返回父路由
this.router.navigate(['../'], { relativeTo: this.route });
// 或者直接指向父路由对象
this.router.navigate(['./'], { relativeTo: this.route.parent });

空数组[]在相对路由中表示当前路由，并非父路由，这会导致导航逻辑不符合预期。

2. 排查重复导航触发点

检查组件内是否有多个地方触发导航：

• 比如点击事件绑定了多次，或者在ngOnInit/ngAfterViewInit等钩子中重复调用导航方法
• 订阅Observable时没有取消订阅，导致回调多次执行触发导航
• 添加防抖或在导航前判断当前路由，避免重复发起：

  if (this.router.url !== '/account/account-settings') {
    this.router.navigate(['../'], { relativeTo: this.route });
  }
  

3. 检查路由守卫配置

查看路由守卫中是否有逻辑在跳转时触发了额外的重定向，比如：

// 错误示例：守卫内不必要的重定向会导致导航ID冲突
canActivate(): boolean {
  if (someCondition) {
    this.router.navigate(['/']);
    return false;
  }
  return true;
}

如果守卫需要拦截导航，直接返回false即可，不要额外调用navigate，否则会触发新的导航导致ID不匹配。

4. 验证路由配置正确性

确认account-settings及其子路由的配置没有错误：

• 父路由不要设置redirectTo属性，避免意外重定向
• 子路由的path配置正确，没有和通配符路由（**）冲突

为什么navigateByUrl能正常工作？ #

router.navigateByUrl是直接操作URL的导航方式，它会强制取消当前所有待处理的导航请求，直接发起新的URL跳转，因此不会被其他同时触发的导航干扰；而router.navigate是基于路由树的导航，会加入导航队列，如果队列中有新的请求，旧的就会被取消。

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