Angular中如何隐藏URL中的特定参数（a1、b1）

你不需要用skipLocationChange（它会完全不更新URL），正确的做法是把不需要显示的参数从queryParams里移除，改用路由state传递这些参数，这样URL里只会保留你想展示的c1和d1。

步骤1：修改跳转代码 #

只将需要在URL显示的c1、d1放入queryParams，a1、b1放到state中：

this.router.navigate(['/'], {
  queryParams: { c1: c, d1: d },
  state: { a1: a, b1: b }
});

步骤2：在目标组件获取隐藏的参数 #

在根组件中通过ActivatedRoute读取state里的a1和b1：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const a1 = this.route.snapshot.state?.a1;
  const b1 = this.route.snapshot.state?.b1;
  // 这里可以使用a1、b1做业务逻辑
}

注意事项 #

• 路由state里的参数不会保存在URL中，页面刷新后会丢失，如果需要持久化这些参数，可以用Angular服务（比如用BehaviorSubject存储）来保存。
• 不要把需要显示的参数和隐藏的参数混在queryParams里，否则都会出现在URL中。

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