Angular应用访问a-review后浏览器返回跳过before-adetail的实现方案

你的现有方案出现闪屏的核心原因是popstate事件触发时，浏览器已经完成了前一个路由（before-adetail）的导航切换，此时再执行history.go(-2)就会出现短暂的页面可见，属于监听时机晚于页面渲染时机导致的问题。

方案一：Angular路由事件拦截（推荐，符合框架规范） #

利用Angular自带的路由事件在导航开始阶段就做拦截，不会触发中间页面的渲染：

1. 首先在a-review组件中存入访问标记：

// a-review.component.ts
ngOnInit() {
  // 用sessionStorage存储，仅当前标签页生效，关闭后自动清理
  sessionStorage.setItem('hasVisitedReview', 'true');
}

2. 在a-detail组件中监听路由启动事件，拦截回退逻辑：

// a-detail.component.ts
import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    // 仅监听用户触发的回退/前进类导航
    filter(e => e instanceof NavigationStart && e.navigationTrigger === 'popstate')
  ).subscribe((event: NavigationStart) => {
    // 判断本次回退目标为before-adetail且用户访问过a-review
    if (event.url === '/before-adetail' && sessionStorage.getItem('hasVisitedReview') === 'true') {
      // 跳过当前导航的地址变更和页面渲染
      this.router.navigateByUrl(event.url, { skipLocationChange: true }).then(() => {
        // 直接回退两步跳过before-adetail
        history.go(-2);
        // 清理标记避免影响后续正常导航逻辑
        sessionStorage.removeItem('hasVisitedReview');
      });
    }
  });
}

方案二：直接调整历史栈结构 #

在a-review页面监听到回退操作时直接修改历史栈，从根源上删除before-adetail的历史条目，完全避免中间页面出现：

// a-review.component.ts
import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {
  this.location.onPopState(() => {
    // 保存当前状态
    const reviewState = history.state;
    // 同步回退两步到before-adetail之前的页面
    history.go(-2);
    // 直接替换当前历史条目为a-detail地址
    history.replaceState(reviewState, '', '/detail');
    // history操作是同步的，浏览器不会渲染中间的before-adetail页面
  });
}

• 如果需要支持用户从a-confirm页面返回a-review后逻辑依然生效，只需在a-confirm组件中保留hasVisitedReview标记即可。
• 两种方案都不会影响未访问过a-review场景下的正常回退逻辑。

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