Angular Router：重定向至带片段路由且不添加至浏览器历史

问题场景 #

我的路由模块中有如下路由：

{ path: 'signup', component: SignupComponent },

该路由必须携带片段（#first-step、#second-step）才能访问，因此我添加了重定向逻辑：

this.route.fragment.subscribe((fragment: string | null) => {
  if (fragment && ['first-step', 'second-step'].includes(fragment)) {
    // 片段合法，后续显示步骤组件的逻辑
  } else {
    this.router.navigate(['signup'], {fragment: 'first-step', replaceUrl: true});
  }
})

当前问题：使用navigate配合replaceUrl: true时，signup和signup#first-step仍会被加入浏览器历史记录。skipLocationChange无法解决，因为它不会修改URL。如果用户从书签或地址栏直接打开signup页面，希望实现无痕迹重定向，不将signup页面添加至历史记录，该如何操作？

解决方案 #

1. 直接操作浏览器历史API（推荐） #

片段属于客户端URL部分，直接用浏览器原生的history.replaceState修改URL，不会新增任何历史记录：

this.route.fragment.subscribe((fragment: string | null) => {
  if (fragment && ['first-step', 'second-step'].includes(fragment)) {
    // 片段合法的处理逻辑
  } else {
    // 替换当前历史条目，不新增记录
    const currentPath = window.location.pathname;
    window.history.replaceState({}, document.title, `${currentPath}#first-step`);
    // 手动触发片段变化通知，确保组件能响应新片段
    this.route.fragment.next('first-step');
  }
})

这种方式直接修改当前历史栈中的URL条目，不会留下signup的历史记录，完全符合无痕迹重定向的需求。

2. 路由守卫提前拦截（更规范的Angular方式） #

在CanActivate守卫中提前检查URL片段，直接修改导航目标，避免进入signup组件后再重定向：

@Injectable()
export class SignupFragmentGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    const fragment = state.fragment;
    if (fragment && ['first-step', 'second-step'].includes(fragment)) {
      return true;
    }
    // 返回带片段的UrlTree，replaceUrl确保替换当前导航，不新增历史
    return this.router.createUrlTree(['signup'], {
      fragment: 'first-step',
      replaceUrl: true
    });
  }
}

然后在路由配置中为signup路由添加该守卫：

{ 
  path: 'signup', 
  component: SignupComponent,
  canActivate: [SignupFragmentGuard]
},

这种方式在路由激活前就完成重定向，不会触发signup组件的初始加载，自然也不会在历史栈中留下signup的记录。

关于replaceUrl的误区纠正 #

你之前用replaceUrl: true仍有历史记录，是因为在组件内部调用navigate时，signup路由已经被加载并写入历史栈，此时replaceUrl只能替换当前条目，但之前的signup已经被记录了。而在守卫中使用replaceUrl或直接操作history.replaceState，都是在signup未进入历史栈前完成替换，所以不会留下痕迹。

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