原文鏈接：https://blazor-university.com/routing/navigating-our-app-via-html/

通過 HTML 導航

源代碼^[1]

鏈接到 Blazor 組件中的路由的最簡單方法是使用 HTML 超鏈接。

<a?href="/Counter">This?works?just?fine</a>

Blazor 組件中的超鏈接會被自動攔截。當用戶單擊超鏈接時，瀏覽器不會向服務器發送請求，而是 Blazor 將更新瀏覽器中的 URL 并呈現與新地址關聯的任何頁面。

使用 NavLink 組件

Blazor 還包括一個用于呈現超鏈接的組件，并額外支持在地址與 URL 匹配時更改 HTML 元素的 CSS 類。

如果我們查看默認 Blazor 應用程序中的 /Shared/NavMenu.razor 組件，我們將標記如下所示：

<NavLink?class="nav-link"?href="counter"><span class="oi?oi-home"?aria-hidden="true"></span>?Counter
</NavLink>

NavLink 組件使用 HTML 超鏈接裝飾其子內容。所有屬性，如 class、href 等，都通過屬性展開^[2]直接呈現給 <a> 元素。NavLink 組件有兩個參數可以提供額外的行為。

ActiveClass 參數指定當瀏覽器的 URL 與 href 屬性的 URL 匹配時，將哪個 CSS 類應用于呈現的 <a> 元素。如果未指定，Blazor 將應用名為“active”的 CSS 類。

URL 匹配

Match 參數標識瀏覽器的 URL 應如何與 href 進行比較，以確定是否應將 ActiveClass 添加到元素的類屬性中。

在新的 Blazor 應用中編輯 /Pages/Counter.razor 文件，以便可以從三個 URL 訪問它。

@page?"/counter"
@page?"/counter/1"
@page?"/counter/2"

然后編輯 /Shared/NavMenu.razor 組件，使 Counter 菜單項有兩個子菜單鏈接。

<li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter"?Match=@NavLinkMatch.All><span class="oi?oi-plus"?aria-hidden="true"></span>Counter</NavLink><ul?class="nav?flex-column"><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter/1"?Match=@NavLinkMatch.All><span class="oi?oi-plus"?aria-hidden="true"></span>Counter/1</NavLink></li><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter/2"?Match=@NavLinkMatch.All><span class="oi?oi-plus"?aria-hidden="true"></span>Counter/2</NavLink></li></ul>
</li>

同時編輯 /wwwroot/site.css 并添加以下內容，以便我們輕松查看哪些 NavLink 元素被認為是“活動的”。

.nav-item?a.active::after
{content:?"?*";margin-left:?1em;
}

三個 NavLink 組件導航到 /counter、/counter/1 和 /counter/2，如果我們運行應用程序并單擊各種鏈接，我們將看到以下內容。

NavLinkMatch

NavLink 組件的 Match 參數接受 NavLinkMatch 類型的值。這告訴 NavLink 組件您希望瀏覽器的 URL 與它呈現的 <a> 元素的 href 屬性如何比較以確定它們是否相同。

在前面的示例中，我們為每個 NavLink 組件的 Match 參數指定了 NavLinkMatch.All。這意味著我們希望 Blazor 僅在其 href 與瀏覽器的 URL 完全匹配時才認為每個 NavLink 都是活動的。如果我們現在更改鏈接到 /counter 的 NavLink，使其匹配參數為 NavLinkMatch.Prefix，我們將看到只要 URL 以 /counter 開頭，它就會被視為匹配，因此它也會匹配 /counter/1 和 /counter/2.

為了說明區別，請在 /Shared/NavMenu.razor 的代碼部分中聲明一個字段

NavLinkMatch?MatchMode?=?NavLinkMatch.All;

找到 <div class="@NavMenuCssClass"... 元素，并在 <ul> 元素之前添加以下標記以將 <select> 綁定到新字段。

<select?@bind=MatchMode?class="form-control"><option?value=@NavLinkMatch.All>All</option><option?value=@NavLinkMatch.Prefix>Prefix</option>
</select>

最后，找到其 href 鏈接到 /counter 的 NavLink，并將其 Match 參數更改為@MatchMode。您的標記現在應該看起來像這樣。

<div?class="top-row?pl-4?navbar?navbar-dark"><a?class="navbar-brand"?href="">NavigationViaHtml</a><button?class="navbar-toggler"?@onclick=ToggleNavMenu><span class="navbar-toggler-icon"></span></button>
</div><div?class="@NavMenuCssClass"?@onclick=ToggleNavMenu><select?@bind=MatchMode?class="form-control"><option?value=@NavLinkMatch.All>All</option><option?value=@NavLinkMatch.Prefix>Prefix</option></select><ul?class="nav?flex-column"><li?class="nav-item?px-3"><NavLink?class="nav-link"?href=""?Match=@NavLinkMatch.All><span class="oi?oi-home"?aria-hidden="true"></span>?Home</NavLink></li><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter"?Match=@MatchMode><span class="oi?oi-plus"?aria-hidden="true"></span>Counter</NavLink><ul?class="nav?flex-column"><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter/1"?Match=@NavLinkMatch.All><span class="oi?oi-plus"?aria-hidden="true"></span>Counter/1</NavLink></li><li?class="nav-item?px-3"><NavLink?class="nav-link"?href="counter/2"?Match=@NavLinkMatch.All><span class="oi?oi-plus"?aria-hidden="true"></span>Counter/2</NavLink></li></ul></li></ul>
</div>@code?{NavLinkMatch?MatchMode?=?NavLinkMatch.All;bool?collapseNavMenu?=?true;string?NavMenuCssClass?=>?collapseNavMenu???"collapse"?:?null;void?ToggleNavMenu(){collapseNavMenu?=?!collapseNavMenu;}
}

選擇 Counter/1 或 Counter/2 鏈接后，切換 <select> 的值。

盡管瀏覽器 URL 保持不變，但我們可以看到第一個 Counter NavLink 根據其 Match 參數的設置在活動/非活動之間切換。

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/NavigatingViaHtml