在 Blazor 應用中，導航鏈接 <NavLink> 是一個非常常用的組件，用於實現頁面的路由導航。<NavLink> 提供了一個 Match 屬性，允許開發者控制鏈接的激活邏輯。本文將詳細解釋 Match="NavLinkMatch.All" 和 Match="NavLinkMatch.Prefix" 的區別，並提供使用場景和最佳實踐。

Match 屬性的作用

Match 屬性用來控制當前頁面路由是否應該激活某個 <NavLink>。激活的鏈接會自動應用一個樣式類（默認為 active），用於提供視覺上的提示。

• 屬性值：
  • NavLinkMatch.All：當當前 URL 完全匹配 href 時，鏈接才會被激活。
  • NavLinkMatch.Prefix（默認）：當當前 URL 以 href 為前綴時，鏈接就會被激活。

區別詳解

1. 精確匹配：NavLinkMatch.All

• 行為：

  • 當當前頁面 URL 和 href 完全一致時，鏈接被激活。
  • 適合需要精確指向某個頁面的場景，防止父路徑干擾。

• 示例：

<NavLink href="/about" Match="NavLinkMatch.All">關於我們</NavLink>

• 路由匹配效果：

  • 當前 URL 是 /about：鏈接被激活。
  • 當前 URL 是 /about/team：鏈接不激活。

• 適用場景：

  • 單頁面導航，例如 /home 或 /contact，需要精確匹配。

2. 部分匹配：NavLinkMatch.Prefix（默認）

• 行為：

  • 當當前頁面 URL 以 href 為前綴時，鏈接被激活。
  • 適合父級導航鏈接，能在用戶訪問子路徑時保持激活狀態。

• 示例：

<NavLink href="/products" Match="NavLinkMatch.Prefix">產品</NavLink>

• 路由匹配效果：

  • 當前 URL 是 /products：鏈接被激活。
  • 當前 URL 是 /products/123：鏈接也被激活，因為 /products/123 以 /products 為前綴。

• 適用場景：

  • 父子結構的導航，例如 /products 和 /products/details。

比較表

示例應用

1. 單層導航結構

當應用只有單層導航時，默認的部分匹配已經足夠，無需額外配置 Match。

• 導航代碼：

<NavLink href="/" class="nav-link">首頁</NavLink>
<NavLink href="/about" class="nav-link">關於我們</NavLink>
<NavLink href="/contact" class="nav-link">聯繫我們</NavLink>

• 行為：

  • 當前 URL 是 /about 時，關於我們 被激活。
  • 當前 URL 是 /contact 時，聯繫我們 被激活。

2. 多層級導航結構

當應用有多層級導航時，需要使用 Match 控制父級和子級鏈接的激活行為。

• 導航代碼：

<NavLink href="/products" Match="NavLinkMatch.Prefix" class="nav-link">產品</NavLink>
<NavLink href="/products/details" Match="NavLinkMatch.All" class="nav-link">產品詳情</NavLink>

行為：

• 當前 URL 是 /products 時：
  • 產品 被激活。
  • 產品詳情 不激活。
• 當前 URL 是 /products/details 時：
  • 產品 和 產品詳情 都被激活，因為 /products/details 以 /products 為前綴。

最佳實踐

1. 單一頁面鏈接使用精確匹配

   • 如果鏈接指向一個獨立的頁面且沒有子路徑，使用 Match="NavLinkMatch.All"：

<NavLink href="/about" Match="NavLinkMatch.All">關於我們</NavLink>

2. 父級導航使用部分匹配

   • 如果鏈接指向一個父級導航，需要保持在子路徑中也處於激活狀態，使用默認的部分匹配：

<NavLink href="/products" Match="NavLinkMatch.Prefix">產品</NavLink>

3. 子級導航使用精確匹配

   • 如果需要區分子級鏈接，使用精確匹配來標識具體頁面：

<NavLink href="/products/details" Match="NavLinkMatch.All">產品詳情</NavLink>

常見問題

1. 如果不設置 Match 會怎麼樣？

默認情況下，Match="NavLinkMatch.Prefix"。這意味著：

• 如果你的導航鏈接沒有子路徑（如 /about），不設置 Match 是完全沒問題的。
• 如果你的導航鏈接有子路徑（如 /products 和 /products/details），默認情況下父鏈接會在子路徑中保持激活。

2. 如何同時激活多個鏈接？

Blazor 的部分匹配（NavLinkMatch.Prefix）天然支持父鏈接和子鏈接同時激活。例如：

• /products/details 時，父鏈接 /products 和子鏈接 /products/details 都會被激活。

總結

1. NavLinkMatch.All：

   • 用於精確匹配的導航鏈接。
   • 適合單一頁面或需要區分父子鏈接的場景。

2. NavLinkMatch.Prefix（默認）：

   • 用於部分匹配的導航鏈接。
   • 適合多層級導航，能自動激活父級鏈接。

3. 推薦使用場景：

   • 父級導航使用部分匹配。
   • 子級導航或精確鏈接使用完全匹配。

4. 注意事項：

   • 默認行為已經能覆蓋大部分應用場景，只有在多層導航中需要更細緻的控制時才需要手動設置 Match。

最簡單的示範

<NavLink href="/" Match="NavLinkMatch.Prefix">首頁</NavLink>
<NavLink href="/category" Match="NavLinkMatch.Prefix">分類</NavLink>
<NavLink href="/category/subcategory" Match="NavLinkMatch.Prefix">子分類</NavLink>
<NavLink href="/category/subcategory/details" Match="NavLinkMatch.All">詳情</NavLink>

行為分析

當前 URL 是 /category/subcategory（第 3 級）

1. 第 1 級（/）

   • 因為 /category/subcategory 以 / 為前綴，所以這個鏈接被激活。
   • 標記為選中狀態。

2. 第 2 級（/category）

   • 因為 /category/subcategory 以 /category 為前綴，所以這個鏈接也被激活。
   • 標記為選中狀態。

3. 第 3 級（/category/subcategory）

   • 因為當前 URL 完全匹配 /category/subcategory，所以這個鏈接被激活。
   • 標記為選中狀態。

4. 第 4 級（/category/subcategory/details）

   • 不激活，因為 /category/subcategory 不以 /category/subcategory/details 開頭，也不完全匹配。

激活的結果：

• 激活鏈接：第 1 級（首頁）、第 2 級（分類）、第 3 級（子分類）。
• 非激活鏈接：第 4 級（詳情）。