Angular 12路由跳转后地址栏URL查询参数自动清除如何解决

问题本质 #

带参跳转后组件能瞬时拿到参数、地址栏URL闪一下带参地址就变成无参地址，核心原因是带参路由跳转完成后，项目内其他逻辑又触发了一次不带查询参数的同路由跳转，直接冲掉了地址栏的参数。
你之前试的queryParamsHandling: 'merge'/'preserve'只对单次navigate调用生效，没法拦截后续其他位置触发的二次无参跳转，所以解决不了问题。你贴的基础路由配置本身没有错误，RouterModule.forRoot()的默认逻辑不会主动清除查询参数。

排查步骤 #

• 全局搜索所有触发/portal路由跳转的代码
  搜索范围覆盖所有组件、服务、路由守卫里的navigate(['/portal'])、navigateByUrl('/portal')调用，以及模板里的routerLink="/portal"写法，逐段确认：
  • 跳转逻辑是不是在PortalComponent初始化阶段（ngOnInit、ngAfterViewInit等生命周期）被自动触发了
  • 跳转时是不是没有携带query参数，也没有加queryParamsHandling: 'preserve'配置
  • 全局登录校验、权限拦截类的路由守卫，是不是在判断到当前访问portal页时，强制重定向到了不带参数的/portal地址
• 快速定位二次跳转触发源
  如果全局搜索没找到问题，在根组件AppComponent里临时加路由事件监听，打印所有跳转记录：

  import { Router, NavigationStart } from '@angular/router';
  
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        console.log('跳转目标URL:', event.url, '触发来源:', event.navigationTrigger);
      }
    });
  }
  

  触发搜索操作后看控制台的打印结果，第二条指向无参/portal的跳转记录就是问题来源，给对应跳转逻辑补上参数或者加preserve配置即可。
• 特殊配置检查
  确认src/index.html里的<base href>配置正确，本地开发环境默认值为<base href="/">，如果配置和项目部署根路径不匹配，也可能出现URL参数异常丢失的问题。

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