ANGULAR 点击浏览器默认返回按钮时如何为上一页添加查询参数

浏览器默认的返回动作是直接读取历史栈里的已有地址，无法直接修改地址携带的参数，我们可以通过拦截返回事件、手动跳转带参地址的方式实现需求，具体实现如下：

完整实现代码 #

第一步：导入所需服务 #

import { Location } from '@angular/common';
import { Router, NavigationEnd } from '@angular/router';
import { Component, OnInit, OnDestroy } from '@angular/core';

第二步：在当前页面组件中添加逻辑 #

@Component({
  selector: 'app-your-current-page',
  templateUrl: './your-current-page.component.html',
  styleUrls: ['./your-current-page.component.css']
})
export class YourCurrentPageComponent implements OnInit, OnDestroy {
  private popstateUnsubscribe?: () => void;
  // 要追加的查询参数，可根据业务逻辑动态赋值
  private extraQueryParams = { filterBy: 'your-custom-value' };

  constructor(
    private location: Location,
    private router: Router
  ) {}

  ngOnInit(): void {
    // 监听浏览器前进/返回事件
    this.popstateUnsubscribe = this.location.subscribe(event => {
      if (event.type === 'popstate') {
        // 阻止默认返回行为
        event.preventDefault?.();
        // 手动跳转到目标上一页，追加自定义查询参数
        // 如果上一页路由固定，直接写死路由地址即可
        this.router.navigate(['/customer-hierarchy'], {
          queryParams: this.extraQueryParams,
          replaceUrl: true
        });
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消事件订阅，避免内存泄漏
    this.popstateUnsubscribe?.();
  }
}

适配动态上一页路由的扩展方案 #

如果你的业务中上一页路由不固定，可以全局存储前一页的地址，跳转时自动读取：

1. 先在全局根组件app.component.ts中存储上一页地址：

export class AppComponent {
  public static previousUrl?: string;
  private currentUrl?: string;

  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        AppComponent.previousUrl = this.currentUrl;
        this.currentUrl = event.urlAfterRedirects;
      }
    });
  }
}

2. 替换上述第二步中的跳转逻辑，自动读取上一页地址跳转：

this.router.navigateByUrl(`${AppComponent.previousUrl}`, {
  queryParams: this.extraQueryParams,
  replaceUrl: true
});

注意事项 #

• replaceUrl: true配置会替换当前历史栈记录，不会新增多余的历史条目，避免用户多次点击返回出现循环跳转问题
• 必须在组件销毁时取消popstate事件的订阅，否则该逻辑会在其他页面继续生效导致路由异常

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