Angular Router使用replaceUrl后浏览器历史重复问题的解决方案

方案一：完全避免生成重复历史记录 #

当从临时页面导航回原页面时，同样使用replaceUrl: true配置，替换当前的历史记录条目而非添加新条目，这样历史栈中不会出现重复的URL记录。

示例代码：

// 从原页面跳转到临时页面
this.router.navigate(['/temp-page'], { replaceUrl: true });

// 从临时页面返回原页面
this.router.navigate(['/original-page'], { replaceUrl: true });

这种方式会让临时页面的记录直接被原页面替换，浏览器历史中始终只有一条有效记录，不会产生重复。

方案二：检测并跳过重复URL #

通过监听Angular路由的NavigationEnd事件，跟踪导航过的URL，当检测到重复URL时，手动调整浏览器历史栈来跳过重复条目。

示例代码：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  const visitedUrls: string[] = [];

  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    const currentUrl = event.urlAfterRedirects;
    // 检查当前URL是否与上一条记录重复
    if (visitedUrls.length > 0 && visitedUrls.at(-1) === currentUrl) {
      // 回退一步跳过重复记录
      window.history.back();
      // 同步更新跟踪数组
      visitedUrls.pop();
    } else {
      visitedUrls.push(currentUrl);
      // 限制跟踪数组长度，避免内存占用过大
      if (visitedUrls.length > 10) {
        visitedUrls.shift();
      }
    }
  });
}

如果需要处理浏览器后退/前进按钮触发的重复导航，还可以监听NavigationStart事件，提前检测目标URL是否重复，取消当前导航并跳转到正确位置：

import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';

// （在constructor中添加）
this.router.events.pipe(
  filter(event => event instanceof NavigationStart)
).subscribe((event: NavigationStart) => {
  if (visitedUrls.length >= 2 && visitedUrls.at(-2) === event.url && visitedUrls.at(-1) === event.url) {
    // 取消当前重复导航
    event.preventDefault();
    // 跳转到上上个有效URL
    const targetUrl = visitedUrls.at(-3) || '/';
    this.router.navigateByUrl(targetUrl);
  }
});

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