### 程式碼範例
Previous Component Function

const navigationExtras: NavigationExtras = {
  state: {
    user: 'John Doe',
    age: 30,
  },
};
this.router.navigate(["/next"], navigationExtras);

Next Component

class NextComponent implements OnInit {
  constructor(private location: Location) {}

  ngOnInit(): void {
    console.log(this.location.getState());
    // {
    //     user: 'John Doe',
    //     age: 30,
    // }
  }
}

### Router.navigate() 和 Location.getState()
在 Angular 中，`Router.navigate()` 方法和 `Location.getState()` 函數是與路由導航和路由狀態管理相關的兩個不同概念。

1. **`Router.navigate(commands: any[], extras?: NavigationExtras | undefined)`**:
- `Router.navigate()` 用於觸發路由導航。這個方法接受兩個參數：`commands` 和 `extras`。
- `commands` 是一個路徑或命令陣列，用於指定導航的目標路徑。
- `extras` 是一個 `NavigationExtras` 物件，它提供了額外的導航選項，如 `queryParams`、`fragment`、`replaceUrl`、`state` 等。

當您使用 `Router.navigate()` 導航到一個新路徑時，可以通過 `extras` 的 `state` 屬性傳遞一些自定義的狀態數據。這些數據在導航過程中會被保留下來。

2. **`Location.getState()`**:
- `Location` 服務提供了一種方式來獲取當前路由狀態的數據，其中包括通過 `Router.navigate()` 傳遞的 `state`。
- 使用 `getState()` 方法，您可以獲取與當前路由相關的狀態數據，這在處理路由導航和數據傳遞時非常有用。

因此，`Router.navigate()` 和 `Location.getState()` 之間的關係在於：您可以使用 `Router.navigate()` 來進行路由導航並可選地傳遞一些狀態數據；隨後，您可以使用 `Location.getState()` 來獲取這些傳遞的狀態數據。這對於在不同頁面或組件間共享數據非常有用，特別是當您不希望這些數據出現在 URL 中時。

### 瀏覽器實作
在使用 Angular 的 `Router.navigate()` 帶有 `state` 參數進行路由導航時，傳遞的數據會存儲在瀏覽器的歷史狀態（History State）中。這裡是一些細節：

1. **瀏覽器的歷史狀態（History State）**:
- 當您使用 `state` 參數傳遞數據時，這些數據會被添加到瀏覽器的歷史紀錄中。
- 歷史狀態是瀏覽器提供的一個機制，它允許開發者在瀏覽器的歷史紀錄（即前進和後退導航）中存儲一些狀態數據。

2. **獲取存儲的數據**:
- 您可以使用 `Location.getState()` 或 `history.state` 在 JavaScript 中獲取當前歷史紀錄條目的狀態對象。
- 這些狀態數據僅與當前的歷史紀錄條目相關聯，並且在進行新的導航時不會被保留。

3. **狀態的限制**:
- 歷史狀態的一個限制是它的大小。大多數瀏覽器對於存儲在歷史狀態中的數據量有限制。
- 另外，由於這些數據與特定的歷史紀錄條目綁定，所以它們不是永久存儲的，一旦用戶離開該頁面，這些數據將不再可用。

因此，當您使用 `Router.navigate()` 並通過 `extras` 中的 `state` 傳遞數據時，這些數據是暫時存儲在瀏覽器的歷史狀態中，用於與特定導航相關聯的情境，而不是永久存儲或跨會話保存。