Angular应用子页面执行history.pushState跳转异常求助

问题场景 #

使用PathLocationStrategy路由模式的Angular 6/15空白应用，在子路由（如/test）页面中，外部广告脚本会执行以下代码：

history.pushState({}, '', '#abc');
window.dispatchEvent(new HashChangeEvent('hashchange'));

预期URL应变为/test#abc，但实际表现：

• Angular 6：URL跳转到/#abc，同时页面回到首页
• Angular 15：URL变为/#abc，但页面停留在子路由
  而在Nuxt.js应用中测试，URL会正常变为/test#abc且页面保持在子路由。由于无法修改外部广告的代码，需要通过配置Angular来解决这个问题。

解决方案 #

方法1：重写history.pushState自动补全路径 #

通过重写浏览器的history.pushState方法，当检测到传入的URL仅为Hash片段时，自动拼接当前页面的Pathname，确保Hash添加到当前子路由后：

// 在app.component.ts的ngOnInit生命周期中添加
ngOnInit(): void {
  const originalPushState = history.pushState;
  history.pushState = function(state: any, title: string, url?: string | null): void {
    // 处理仅以#开头的Hash参数
    if (url?.startsWith('#')) {
      const currentPath = window.location.pathname;
      url = currentPath + url;
    }
    originalPushState.call(this, state, title, url);
  };
}

这样外部脚本调用history.pushState({}, '', '#abc')时，会自动补全为当前子路由路径+Hash，最终URL变为/test#abc，同时不会触发Angular的错误路由跳转。

方法2：监听HashChange事件修正路由 #

如果重写pushState的方式不生效，可以通过监听hashchange事件，结合路由记录来修正URL：

// 在app.component.ts中添加
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

private routerSub?: Subscription;

constructor(private router: Router) {}

ngOnInit(): void {
  // 监听Hash变化，修正丢失的子路由
  window.addEventListener('hashchange', (event) => {
    const savedPath = sessionStorage.getItem('currentRoutePath');
    // 当URL被重置为根路径但存在Hash，且有保存的子路由时，修正URL
    if (window.location.pathname === '/' && savedPath && window.location.hash) {
      const correctUrl = savedPath + window.location.hash;
      // 使用replaceState避免生成多余的历史记录
      history.replaceState({}, '', correctUrl);
      event.preventDefault();
    }
  });

  // 监听Angular路由变化，保存当前子路由路径
  this.routerSub = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 去掉Hash部分，仅保存路径
      const path = event.urlAfterRedirects.split('#')[0];
      sessionStorage.setItem('currentRoutePath', path);
    }
  });
}

ngOnDestroy(): void {
  this.routerSub?.unsubscribe();
}

该方法通过记录当前活跃的子路由路径，当Hash变化导致路径被重置为根路径时，自动将URL修正为保存的子路由+当前Hash，保证页面路径和URL一致。

补充说明 #

Angular的PathLocationStrategy采用HTML5路由模式，浏览器在处理仅含Hash的pushState参数时，会默认将其解析为根路径下的Hash，从而导致子路由丢失。而Nuxt.js的路由处理逻辑会自动保留当前路径，仅修改Hash部分，这是框架间的行为差异。

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