Router 程式碼導航

可以透過 Router 這個服務裡面的 navigate 方法來觸發導航行為。

基本用法

navigate 方法接收一個 array，跟 routerLink 一樣它可以接受多個 segment。

所以如果我要導航到 <domain>/users/<userId>/tasks，可以這樣寫：

// 先注入 Router，也可以用 inject
constructor(private router: Router) {}

// 在方法中使用 router 的 navigate 方法
onSubmit(){
    // ...
    this.router.navigate(['/users', this.userId(), 'tasks']);
}

導航選項

navigate 方法也可以傳遞一個 configuration 物件作為第二個參數，以設定額外的導航選項，例如：

this.router.navigate(['/users', this.userId(), 'tasks'], {
  replaceUrl: true,
  queryParams: { filter: 'active' }
});

常用的導航選項包括：

• replaceUrl: true - 確保這個導航是一個 redirect 行為，並確保使用者無法使用 Back 按鈕返回他們進入此頁的原本頁面（在提交表單後常會有這種情境需求）

• queryParams - 設定 URL 的查詢參數

• fragment - 設定 URL 的錨點 (fragment，即 # 後面的部分)

• relativeTo - 相對於特定的 ActivatedRoute 進行導航

實際應用例子

在表單提交成功後導向到列表頁面：

onSubmitForm() {
  this.userService.saveUser(this.user).subscribe({
    next: () => {
      // 儲存成功後導航到列表頁面，並替換 URL
      this.router.navigate(['/users'], { 
        replaceUrl: true,
        queryParams: { success: 'true' }
      });
    },
    error: (error) => {
      console.error('儲存失敗', error);
    }
  });
}