Blazor <NavLink> 中的 Match 屬性詳解

| .NET | 144 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1077

在 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。

比較表

匹配類型 激活條件 適用場景
NavLinkMatch.All 當前 URL 必須與 href 完全一致 單一頁面導航，例如首頁或精確匹配的頁面
NavLinkMatch.Prefix 當前 URL 以 href 為前綴即可 父子層級導航，例如分類和子分類導航

示例應用

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>

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

    • 如果鏈接指向一個父級導航，需要保持在子路徑中也處於激活狀態，使用默認的部分匹配：
<NavLink href="/products" Match="NavLinkMatch.Prefix">產品</NavLink>

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

    • 如果需要區分子級鏈接，使用精確匹配來標識具體頁面：
<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 級（詳情）。

This article was last edited at