Blazor路由與頁面導航開發介紹
在 Blazor 中,應用中的每個頁面都是一個元件,通常在 razor 檔案中定義,具有一個或多個指定路由。 路由大多數發生在客戶端,而不涉及特定的伺服器請求。 瀏覽器首先發出對應用程式根地址的請求。 然後, Blazor 應用中的根 Router 元件會處理截獲導航請求,並將它們處理到正確的元件。
Blazor 中的路由由 Router 元件處理。 Router 元件通常在應用程式的根元件( App.Razor )中使用。
Router
下面是VisualStudio建立的預設App.Razor的模板設定
<Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry,there's nothing at this address.</p> </LayoutView> </NotFound> </Router>
Router 元件將發現指定 AppAssembly 中和指定 AdditionalAssemblies 中的可路由元件。 當瀏覽器導航時,Router 會截獲導航,並使用提取的 RouteData 呈現其 Found 引數的內容(如果路由與地址匹配),否則 Router 將呈現其 NotFound 引數。
RouteView 元件會處理 RouteData 指定的匹配元件(如果有)。 如果匹配的元件沒有佈局,則使用可選的指定DefaultLayout 。
路由模板
在宣告的Razor元件當中,可以在元件當中定義一個或多個@Page "/xxx",通過該宣告表示該元件可用於Router的導航,否則只充當單個應用元件。
原因:Blazor 會編譯帶有 @page指令的.razor檔案,將為生成的類提供指定路由模板的 RouteAttribute,當瀏覽器發出對應用程式根地址的請求時,Blazor 應用中的根 Router 元件會處理截獲導航請求,並將它們處理到正確的元件,如果能夠找到元件,將會為其呈現在指定的 Layout 當中,否則呈現 NotFound 的自定義內容。 (關於Router元件的介紹)
新增@page "xxx" 引數是必需的,如果你需要用於導航,與ASP.NET Web窗體不同,指向Blazor元件的路由不會從其檔案位置推斷出來(儘管這可能是將來新增的功能)。
@page "/test/{text}" @page "/test" <h6>Hello</h6> <h3>@Text</h3> @code { [Parameter] public string Text { get; set; } }
路由引數
在上面的程式碼中,@page "/test/{text}",尖括號的部分則代表路由引數,代表該頁面在導航時可以接受一個引數。
注意:當宣告路由引數的時候,由於需要該引數,則需要為該引數宣告一個元件引數 (不區分大小寫):
@page "/NodePage/test/{Text}" @code { [Parameter] public string TexT { get; set; } }
路由約束
可以為路由引數設定路由約束,可以用於限定引數的型別,使用方式:
@page "/Users/{Id:int}" <h1>The user Id is @Id!</h1> @code { [Parameter] public int Id { get; set; } }
可用於約束的列表:
導航元件
NavLink 元件
建立導航連結時,請使用 NavLink 元件代替 HTML 超連結元素 ()。 aFwbEcNavLink 元件的行為方式類似於元素,但它根據其 active 是否與當前 URL 匹配來切換 href 類。
以下 NavMenu 元件建立啟動導航欄,該導航欄演示如何使用 NavLink 元件:
<div class="@NavMenuCssClass" @onclick="@ToggleNavMenu"> <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href="" Match=" rel="external nofollow" 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="MyComponent" rel="external nofollow" Match="NavLinkMatch.Prefix"> <span class="oi oi-plus" aria-hidden="true"></span> My Component </NavLink> </li> </ul> </div>
- NavLinkMatch.All – NavLink 在與當前整個 URL 匹配的情況下處於活動狀態。
- NavLinkMatch.Prefix(預設)– NavLink 在與當前 URL 的任何字首匹配的情況下處於活動狀態。
NavigationManager
NavigationManager 服務,可用於:
- 獲取當前瀏覽器地址
- 獲取基址
- 觸發器導航
- 當地址更改時收到通知
在C#程式碼中,可以使用NavigationManager進行頁面導航,如下所示:
- 1.在Razor中注入: @inject NavigationManager NavigationManager
- 2.建立方法,使用NavigateTo 傳遞URL
@inject NavigationManager NavigationManager <button @onclick="NacigationToPage">NavigationTo</button> @code{ public void NacigationToPage() { NavigationManager.NavigateTo("/test/999"); } }
test.razor 頁面引用@page:
@page "test/{text}" //...
關於NavigationManager中的事件和方法說明:
到此這篇關於Blazor路由與頁面導航開發的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支援我們。