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; }
}

可用於約束的列表:

Blazor路由與頁面導航開發介紹

導航元件

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路由與頁面導航開發介紹

到此這篇關於Blazor路由與頁面導航開發的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。

Blazor路由與頁面導航開發介紹

Router

路由模板

路由引數

路由約束

導航元件

NavLink 元件

NavigationManager

相關推薦