路由導航方法比較

Angular 提供了兩種主要的程式化導航方法：router.navigate() 和 router.navigateByUrl()。這兩種方法都可以實現頁面轉換，但各自有不同的特性和適用場景。

router.navigate(['/login'])

特點

1. 接受一個路由陣列：可以構建更複雜的路由，適合包含多段路徑的路由

2. 更靈活的參數處理：可以額外傳入一個導航選項物件來設定查詢參數、片段等

3. 支援相對導航：如果路徑不以 / 開頭，則會相對於當前活動路由導航

4. 支援豐富的配置選項：第二個參數可以指定各種導航選項

範例

// 基本導航到登入頁面
this.router.navigate(['/login']);

// 導航到帶有路由參數的頁面
this.router.navigate(['/user', userId]);

// 導航到登入頁面並帶有查詢參數和片段
this.router.navigate(['/login'], {
  queryParams: { returnUrl: currentUrl },
  fragment: 'top'
});

// 保留現有的查詢參數
this.router.navigate(['/products'], {
  queryParamsHandling: 'preserve'
});

// 相對導航（相對於當前路由）
this.router.navigate(['../sibling']);

router.navigateByUrl('/login')

特點

1. 接受一個完整的 URL 字串：適合直接指定絕對路徑

2. 處理整個 URL：包括查詢參數和片段，必須作為字串的一部分

3. 總是絕對導航：不支援相對路徑導航

4. 替換整個 URL：會重置並替換當前 URL 的所有部分

範例

// 基本導航到登入頁面
this.router.navigateByUrl('/login');

// 導航到完整 URL，包括查詢參數和片段
this.router.navigateByUrl('/login?returnUrl=/dashboard#top');

// 可以透過第二個參數提供一些配置選項
this.router.navigateByUrl('/dashboard', { replaceUrl: true });

選擇指南

使用 navigate() 當：

• 需要構建複雜的路由參數

• 需要保留現有查詢參數

• 需要相對導航

• 需要更多的導航控制選項

• 處理巢狀路由或子路由

使用 navigateByUrl() 當：

• 有一個完整的絕對 URL

• 想要完全替換當前的 URL（包括查詢參數等）

• 需要更直接、更簡單的導航方式

• 從外部來源（如剪貼簿或配置）獲取完整的 URL

常見陷阱和注意事項

1. 參數傳遞差異：

   // navigate() - 路由參數作為陣列元素
   this.router.navigate(['/user', userId]);
   
   // navigateByUrl() - 路由參數作為字串的一部分
   this.router.navigateByUrl(`/user/${userId}`);

2. 查詢參數處理：

   // navigate() - 使用 queryParams 物件
   this.router.navigate(['/search'], { queryParams: { term: 'angular' } });
   
   // navigateByUrl() - 查詢參數是 URL 的一部分
   this.router.navigateByUrl('/search?term=angular');

3. 相對導航限制：navigateByUrl() 總是從應用的根路徑開始，不支援相對路徑。

4. 返回值：兩個方法都返回 Promise<boolean>，指示導航是否成功完成：

   this.router.navigate(['/dashboard'])
     .then(success => {
       if (success) {
         console.log('導航成功');
       } else {
         console.log('導航被阻止');
       }
     });

實際應用建議

在大多數情況下，router.navigate() 是更好的選擇，因為它提供了更多的靈活性和控制。只有在需要直接使用完整 URL 字串的特定情境下，才會選擇 navigateByUrl()。

如果你的應用較簡單，只需基本的頁面跳轉，兩種方法都能滿足需求。但隨著應用複雜度增加，navigate() 的靈活性往往會帶來更多好處。