Sterowanie nawigacją aplikacji za pomocą składnika routera Platformy Blazor

5 min

System routingu platformy Blazor oferuje elastyczne opcje zapewniające, że żądania użytkowników docierają do składnika, który może je obsłużyć i zwracać informacje, których chce użytkownik.

Załóżmy, że pracujesz na stronie internetowej firmy dostarczającej pizze. Chcesz skonfigurować witrynę, aby żądania dotyczące szczegółów pizzy i szczegółów niestandardowego toppingu zostały obsłużone przez ten sam składnik. Ukończono tę fazę, ale testowanie pokazuje, że żądania topping otrzymują komunikat o błędzie. Należy rozwiązać ten problem.

Tutaj dowiesz się, jak skonfigurować trasy w środowisku Blazor przy użyciu @page dyrektywy .

Uwaga

Bloki kodu w tej lekcji są przykładami ilustracyjnymi. Napiszesz własny kod w następnej lekcji.

Korzystanie z szablonów tras

Gdy użytkownik wysyła żądanie dotyczące strony z aplikacji internetowej, może określić, co chce zobaczyć z informacjami w identyfikatorze URI. Na przykład:

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

Po adresie protokołu i witryny internetowej ten identyfikator URI wskazuje, że użytkownik chce wiedzieć o pizzach ix. Ponadto ciąg zapytania po znaku zapytania pokazuje, że są zainteresowani dodatkowym dodatkiem ananasu. W rozwiązaniu Blazor używasz routingu, aby upewnić się, że każde żądanie jest wysyłane do składnika, który może najlepiej odpowiedzieć. Możesz również użyć routingu, aby upewnić się, że składnik ma wszystkie informacje potrzebne do wyświetlenia żądanych informacji. W takim przypadku możesz wysłać żądanie do składnika Pizzas i dla tego składnika, aby wyświetlić pizzę z ix z informacjami na temat dodawania do niego ananasu.

Platforma Blazor kieruje żądania z wyspecjalizowanym składnikiem nazywanym składnikiem Router . Składnik jest skonfigurowany w pliku App.razor w następujący sposób:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, we haven't found any pizzas here.</p>
    </NotFound>
</Router>

Po uruchomieniu aplikacji platforma Blazor sprawdza atrybut, AppAssembly aby dowiedzieć się, który zestaw powinien skanować. Skanuje ten zestaw pod kątem składników, które mają obecny atrybut RouteAttribute . Platforma Blazor używa tych wartości do skompilowania obiektu RouteData , który określa sposób kierowania żądań do składników. Podczas kodowania aplikacji należy użyć @page dyrektywy w każdym składniku, aby naprawić atrybut RouteAttribute.

W poprzednim kodzie <Found> tag określa składnik, który obsługuje routing w czasie wykonywania: składnik RouteView . Ten składnik odbiera obiekt RouteData i wszystkie parametry z identyfikatora URI lub ciągu zapytania. Następnie renderuje określony składnik i jego układ. Możesz użyć tagu <Found> , aby określić układ domyślny, który jest używany, gdy wybrany składnik nie określa układu z dyrektywą @layout . Więcej informacji na temat układów znajdziesz w dalszej części tego modułu.

W składniku <Router> można również określić, co jest zwracane użytkownikowi, gdy nie ma pasującej trasy, używając tagu <NotFound> . Powyższy przykład zwraca pojedynczy <p> akapit, ale można renderować bardziej złożony kod HTML. Może na przykład zawierać link do strony głównej lub strony kontaktowej dla administratorów witryny.

@page Korzystanie z dyrektywy

W składniku Blazor dyrektywa określa, @page że składnik powinien obsługiwać żądania bezpośrednio. Możesz określić element RouteAttribute w @page dyrektywie, przekazując go jako ciąg. Na przykład ten atrybut określa, że strona obsługuje żądania do trasy /Pizzas :

@page "/Pizzas"

Jeśli chcesz określić więcej niż jedną trasę do składnika, użyj co najmniej dwóch @page dyrektyw, takich jak w tym przykładzie:

@page "/Pizzas"
@page "/CustomPizzas"

Uzyskiwanie informacji o lokalizacji i nawigowanie za pomocą elementu NavigationManager

Załóżmy, że piszesz składnik do obsługi identyfikatora URI, którego użytkownik żąda, na przykład http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.

Podczas pisania składnika może być potrzebny dostęp do informacji nawigacji, takich jak:

Bieżący pełny identyfikator URI, taki jak http://www.contoso.com/pizzas/margherita?extratopping=pineapple.
Podstawowy identyfikator URI, taki jak http://www.contoso.com/.
Podstawowa ścieżka względna, taka jak pizzas/margherita.
Ciąg zapytania, taki jak ?extratopping=pineapple.

Aby uzyskać wszystkie te wartości, można użyć NavigationManager obiektu . Należy wstrzyknąć obiekt do składnika, a następnie uzyskać dostęp do jego właściwości. Ten kod używa NavigationManager obiektu do uzyskania podstawowego identyfikatora URI witryny internetowej, a następnie używa go do ustawienia linku do strony głównej:

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<a href=@HomePageURI>Home Page</a>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    public string HomePageURI { get; set; }
    
    protected override void OnInitialized()
    {
        HomePageURI = NavManager.BaseUri;
    }
}

Aby uzyskać dostęp do ciągu zapytania, należy przeanalizować pełny identyfikator URI. Aby wykonać tę analizy, użyj QueryHelpers klasy z Microsoft.AspNetCore.WebUtilities zestawu:

@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<p>I want to add this topping: @ToppingName</p>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    private string ToppingName { get; set; }
    
    protected override void OnInitialized()
    {
        var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
        {
            ToppingName = System.Convert.ToString(extraTopping);
        }
    }
}

Po wdrożeniu poprzedniego składnika, jeśli użytkownik zażądał identyfikatora URI http://www.contoso.com/pizzas?extratopping=Pineapple, zobaczy komunikat "Chcę dodać ten dodatek: Pineapple" na renderowanej stronie.

Możesz również użyć NavigationManager obiektu , aby wysłać użytkowników do innego składnika w kodzie, wywołując metodę NavigationManager.NavigateTo() :

@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<button class="btn" @onclick="NavigateToPaymentPage">
    Buy this pizza!
</button>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    private void NavigateToPaymentPage()
    {
        NavManager.NavigateTo("buypizza");
    }
}

Uwaga

Ciąg przekazywany do NavigateTo() metody to bezwzględny lub względny identyfikator URI, w którym chcesz wysłać użytkownika. Upewnij się, że masz składnik skonfigurowany pod tym adresem. W poprzednim kodzie składnik z dyrektywą @page "/buypizza" obsłuży tę trasę.

Korzystanie ze składników NavLink

W jednym z poprzednich przykładów kod został użyty do uzyskania NavigationManager.BaseUri wartości i użycia go do ustawienia href atrybutu <a> tagu na stronę główną. Na platformie Blazor użyj składnika NavLink , aby renderować <a> tagi, ponieważ przełącza klasę active CSS, gdy atrybut łącza href jest zgodny z bieżącym adresem URL. active Styl klasy umożliwia określenie użytkownika, który link nawigacji znajduje się dla bieżącej strony.

W przypadku korzystania z linku DovLink przykład linku do strony głównej wygląda podobnie do następującego kodu:

@page "/pizzas"
@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    public string HomePageURI { get; set; }
    
    protected override void OnInitialized()
    {
        HomePageURI = NavManager.BaseUri;
    }
}

Atrybut Match w składniku NavLink jest używany do zarządzania, gdy link zostanie wyróżniony. Dostępne są dwie opcje:

NavLinkMatch.All: jeśli używasz tej wartości, link jest wyróżniony tylko jako aktywny link, gdy jest zgodny href z całym bieżącym adresem URL.
NavLinkMatch.Prefix: Jeśli używasz tej wartości, link jest wyróżniony jako aktywny, gdy jest zgodny href z pierwszą częścią bieżącego adresu URL. Załóżmy na przykład, że masz link <NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Ten link zostanie wyróżniony jako aktywny, gdy bieżący adres URL był http://www.contoso.com/pizzas i dla dowolnej lokalizacji w tym adresie URL, na przykład http://www.contoso.com/pizzas/formaggio. To zachowanie może pomóc użytkownikowi zrozumieć, która sekcja witryny internetowej jest obecnie wyświetlana.

Sprawdź swoją wiedzę

Jakiego składnika należy użyć, aby uzyskać informacje o lokalizacji identyfikatora URI wewnątrz składnika blazor?

RouteManager

NavigationManager

ServiceLocator

Jaka jest domyślna klasa CSS dodana do tagu kotwicy przez składnik NavLink, gdy navLink odwołuje się do bieżącego adresu URL?

current

live

active