Angular 應用在瀏覽器后退點擊時跳過其中一頁

Question

我有一個組件before-adetail有一個鏈接到另一個組件a-detail ，它又有一個鏈接到a-review ，它又有一個鏈接到a-confirm 。

所以流程是before-adetail -> a-detail -> a-review -> a-confirm

在 adetail.component.html 之前：

<p>before-adetail works!</p>
<a routerLink="/detail">A-detail</a>

細節：

<p>a-detail works!</p>
<a routerLink="/review">A-review</a>

評論：

<p>a-review works!</p>
<a routerLink="/confirm">A-confirm</a>

確認：

<p>a-confirm works!</p>

因此，當我第一次運行應用程序時，新選項卡存儲在歷史記錄中。 假設我在 localhost:4200 上運行應用程序。 然后，當我點擊before-adetail中的鏈接時，這也存儲在歷史記錄中等等。

如果我從a-review頁面按下瀏覽器后退按鈕，它會返回到a-detail頁面，如果我再次按下后退按鈕，它會轉到before-adetail 。

但我想要實現的是，如果我訪問了a-review並按下后退按鈕，它應該是 go 到a-detail並且當我再次按下時它不應該是 go 到before-adetail但歷史上任何頁面之前的頁面。

只有當我訪問過評論頁面時，我才需要此功能，如果我沒有訪問過，它應該可以正常工作。

我如何實現這一目標？

我現在嘗試的是：在a-review.component.ts里面

location.onPopState(() => {
      const temporaryUrl = window.location.href;
      const url = temporaryUrl.replace('/review', '/detail');
      history.pushState('a-review', '', url);
    });
  }

通過a-review才知道瀏覽器返回已經點擊了a-review頁面

在a-detail.component.ts里面

location.onPopState(() => {
      if (history.state === 'a-review') {
        history.go(-2);
      }
    });
  }

這確實實現了我正在嘗試做的事情，但是對於像 1 秒或兩秒這樣的瞬間，即使是我不想要的before-adetail頁面也是可見的。

改善這個的方法是什么或者其他更好的方法是什么？ 謝謝。

Answer 1

我會建議你使用 replaceUrl

<p>a-review works!</p>
<a routerLink="/confirm" [replaceUrl]="true">A-confirm</a>

它的作用是當您單擊“A-confirm”時，當前歷史狀態（'/review' 路徑）將被替換為'/confirm'。 和“后退”按鈕將帶你直接回到“/細節”