在 Blazor 中，應(yīng)用中的每個(gè)頁面都是一個(gè)組件，通常在 razor 文件中定義，具有一個(gè)或多個(gè)指定路由。 路由大多數(shù)發(fā)生在客戶端，而不涉及特定的服務(wù)器請(qǐng)求。 瀏覽器首先發(fā)出對(duì)應(yīng)用程序根地址的請(qǐng)求。 然后， Blazor 應(yīng)用中的根 Router 組件會(huì)處理截獲導(dǎo)航請(qǐng)求，并將它們處理到正確的組件。

Blazor 中的路由由 Router 組件處理。 Router 組件通常在應(yīng)用程序的根組件（ App.Razor ）中使用。

Router

下面是VisualStudio創(chuàng)建的默認(rèn)App.Razor的模板設(shè)置

    <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 組件將發(fā)現(xiàn)指定 AppAssembly 中和指定 AdditionalAssemblies 中的可路由組件。 當(dāng)瀏覽器導(dǎo)航時(shí)，Router 會(huì)截獲導(dǎo)航，并使用提取的 RouteData 呈現(xiàn)其 Found 參數(shù)的內(nèi)容（如果路由與地址匹配），否則 Router 將呈現(xiàn)其 NotFound 參數(shù)。
RouteView 組件會(huì)處理 RouteData 指定的匹配組件（如果有）。 如果匹配的組件沒有布局，則使用可選的指定DefaultLayout 。

路由模板

在聲明的Razor組件當(dāng)中, 可以在組件當(dāng)中定義一個(gè)或多個(gè)@Page "/xxx" , 通過該聲明表示該組件可用于Router的導(dǎo)航, 否則只充當(dāng)單個(gè)應(yīng)用組件。

原因: Blazor 會(huì)編譯帶有 @page指令的.razor文件，將為生成的類提供指定路由模板的 RouteAttribute, 當(dāng)瀏覽器發(fā)出對(duì)應(yīng)用程序根地址的請(qǐng)求時(shí), Blazor 應(yīng)用中的根 Router 組件會(huì)處理截獲導(dǎo)航請(qǐng)求，并將它們處理到正確的組件, 如果能夠找到組件,將會(huì)為其呈現(xiàn)在指定的 Layout 當(dāng)中, 否則呈現(xiàn) NotFound 的自定義內(nèi)容。 (關(guān)于Router組件的介紹)

添加@page "xxx" 參數(shù)是必需的, 如果你需要用于導(dǎo)航, 與ASP.NET Web窗體不同，指向Blazor組件的路由不會(huì)從其文件位置推斷出來（盡管這可能是將來添加的功能）。

@page "/test/{text}"
@page "/test"

<h6>Hello</h6>
<h3>@Text</h3>

@code {
    [Parameter]
    public string Text { get; set; }
}

路由參數(shù)

在上面的代碼中, @page "/test/{text}" , 尖括號(hào)的部分則代表路由參數(shù), 代表該頁面在導(dǎo)航時(shí)可以接受一個(gè)參數(shù)。
注意:當(dāng)聲明路由參數(shù)的時(shí)候,由于需要該參數(shù), 則需要為該參數(shù)聲明一個(gè)組件參數(shù) (不區(qū)分大小寫):

    @page "/NodePage/test/{Text}"

@code {
    [Parameter]
    public string TexT { get; set; }
}

路由約束

可以為路由參數(shù)設(shè)定路由約束, 可以用于限定參數(shù)的類型, 使用方式:

    @page "/Users/{Id:int}"

<h1>The user Id is @Id!</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

可用于約束的列表:

導(dǎo)航組件

NavLink 組件

創(chuàng)建導(dǎo)航鏈接時(shí)，請(qǐng)使用 NavLink 組件代替 HTML 超鏈接元素 ()。 NavLink 組件的行為方式類似于 元素，但它根據(jù)其 active 是否與當(dāng)前 URL 匹配來切換 href CSS 類。

以下 NavMenu 組件創(chuàng)建啟動(dòng)導(dǎo)航欄，該導(dǎo)航欄演示如何使用 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 在與當(dāng)前整個(gè) URL 匹配的情況下處于活動(dòng)狀態(tài)。
• NavLinkMatch.Prefix（默認(rèn)）– NavLink 在與當(dāng)前 URL 的任何前綴匹配的情況下處于活動(dòng)狀態(tài)。

NavigationManager

NavigationManager 服務(wù)，可用于：

• 獲取當(dāng)前瀏覽器地址
• 獲取基址
• 觸發(fā)器導(dǎo)航
• 當(dāng)?shù)刂犯臅r(shí)收到通知

在C#代碼中, 可以使用NavigationManager進(jìn)行頁面導(dǎo)航,如下所示:

• 1.在Razor中注入: @inject NavigationManager NavigationManager
• 2.創(chuàng)建方法,使用NavigateTo 傳遞URL

    @inject NavigationManager NavigationManager
<button @onclick="NacigationToPage">NavigationTo</button>
@code{
    public void NacigationToPage()
    {
        NavigationManager.NavigateTo("/test/999");
    }
}

test.razor 頁面引用@page:

    @page "test/{text}"

//...

關(guān)于NavigationManager中的事件和方法說明:

 到此這篇關(guān)于Blazor路由與頁面導(dǎo)航開發(fā)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論