Angular页面刷新后QueryParams为空，无法获取当前参数值

• 检查路由更新时的queryParamsHandling配置
  当你通过router.navigate更新queryParams时，必须指定queryParamsHandling为'merge'或'preserve'，否则刷新后参数会丢失。示例代码：

  this.router.navigate([], {
    queryParams: { paramKey: newFormValue },
    queryParamsHandling: 'merge' // 保留原有参数，仅更新目标参数
  });
  

  若使用routerLink，同样需要添加该配置：

  <a [routerLink]="[]" [queryParams]="{ paramKey: formValue }" queryParamsHandling="merge">更新参数</a>
  

• 改用queryParamMap替代queryParams
queryParams是旧API，Angular推荐使用queryParamMap来稳定获取参数（包括刷新后的初始值）。在ngOnInit中这样实现：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit(): void {
    // 直接获取当前快照的参数（刷新后可读取）
    const paramValue = this.route.snapshot.queryParamMap.get('yourParamKey');
    
    // 订阅参数变化（包含刷新后的初始值）
    this.route.queryParamMap.subscribe(params => {
      const paramValue = params.get('yourParamKey');
      // 这里处理参数值更新逻辑
    });
  }
  

• 排查是否有代码主动清空queryParams
  检查项目中的路由守卫（如CanActivate）或全局路由事件监听，确认是否存在页面加载时清空queryParams的逻辑，导致刷新后参数丢失。

• 确认地址栏参数的持久化状态
  刷新页面后先查看地址栏的queryParams是否存在。如果地址栏参数也消失，说明你更新参数时可能使用了skipLocationChange: true，这个配置会让地址栏临时变化但不写入浏览器历史，刷新后参数自然丢失，需移除该配置。

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