Pomocí komponenty Blazor směrovače řiďte navigaci vaší aplikace.
- 5 min
Systém směrování Blazor nabízí flexibilní možnosti pro zajištění toho, aby požadavky uživatelů dosáhly komponenty, která je dokáže zpracovat, a vrací informace, které chce uživatel.
Předpokládejme, že pracujete na webu společnosti pro doručování pizzy. Chcete nastavit stránku tak, aby žádosti o podrobnosti o pizzě a podrobnosti o vlastních polevách byly zpracovávány stejnou komponentou. Tuto fázi jste dokončili, ale vaše testování ukazuje, že požadavky na přídavky zobrazují chybovou zprávu. Tento problém je potřeba vyřešit.
Tady se dozvíte, jak nakonfigurovat trasy v Blazoru pomocí direktivy @page .
Note
Bloky kódu v této lekci jsou ilustrativní příklady. V další lekci napíšete vlastní kód.
Použití šablon tras
Když uživatel vytvoří požadavek na stránku z vaší webové aplikace, může určit, co chce zobrazit s informacemi v identifikátoru URI. Například:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Po protokolu a adrese webu tento identifikátor URI označuje, že uživatel chce vědět o margherita pizzas. Řetězec dotazu za otazníkem také ukazuje, že se zajímají o extra přísadu ananasu. V Blazoru použijete směrování, abyste zajistili, že se každý požadavek odešle do komponenty, která dokáže nejlépe reagovat. Pomocí směrování také zajistíte, že komponenta má všechny potřebné informace k zobrazení toho, co uživatel chce. V takovém případě možná budete chtít odeslat požadavek na komponentu Pizzas, aby tato komponenta zobrazila pizzu margherita s možností přidání ananasu.
Blazor směruje požadavky se specializovanou komponentou nazvanou Router . Komponenta se konfiguruje v App.razoru takto:
<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>
Když se aplikace spustí, Blazor zkontroluje AppAssembly atribut a zjistí, které sestavení má prohledávat. Zkontroluje, jestli sestavení obsahuje komponenty, které mají atribut RouteAttribute . Blazor tyto hodnoty používá ke kompilaci objektu RouteData , který určuje, jak se požadavky směrují do komponent. Při kódování aplikace použijete direktivu @page v každé komponentě k opravě RouteAttribute.
V předchozím kódu značka určuje komponentu, <Found> která zpracovává směrování za běhu: komponentu RouteView . Tato komponenta přijímá objekt RouteData a všechny parametry z identifikátoru URI nebo řetězce dotazu. Potom vykreslí zadanou komponentu a její rozložení. Značku můžete použít <Found> k určení výchozího rozložení, které se použije, když vybraná komponenta nezadá rozložení s direktivou @layout . Další informace o rozloženích se dozvíte později v tomto modulu.
V komponentě <Router> můžete také určit, co se uživateli vrátí, pokud neexistuje odpovídající trasa, pomocí značky <NotFound> . Předchozí příklad vrátí jeden <p> odstavec, ale můžete vykreslit složitější HTML. Může například obsahovat odkaz na domovskou stránku nebo kontaktní stránku pro správce webu.
Použití direktivy @page
V komponentě Blazor direktiva @page určuje, že komponenta by měla zpracovávat požadavky přímo. RouteAttributetak, že ji předáte jako řetězec. Tento atribut například určuje, že stránka zpracovává požadavky na trasu /Pizzas :
@page "/Pizzas"
Pokud chcete zadat více než jednu trasu ke komponentě, použijte dvě nebo více @page direktiv, například v tomto příkladu:
@page "/Pizzas"
@page "/CustomPizzas"
Získání informací o poloze a navigace pomocí NavigationManageru
Předpokládejme, že napíšete komponentu pro zpracování identifikátoru URI, který uživatel požaduje, například http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Při psaní komponenty možná budete potřebovat přístup k navigačním informacím, například:
- Aktuální úplný identifikátor URI, například
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - Základní identifikátor URI, například
http://www.contoso.com/. - Základní relativní cesta, například
pizzas/margherita. - Řetězec dotazu, například
?extratopping=pineapple.
K získání všech těchto hodnot můžete použít NavigationManager objekt. Objekt je nutné vložit do komponenty a pak získat přístup k jeho vlastnostem. Tento kód pomocí objektu NavigationManager získá základní identifikátor URI webu a pak ho použije k nastavení odkazu na domovskou stránku:
@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;
}
}
Pokud chcete získat přístup k řetězci dotazu, musíte analyzovat úplný identifikátor URI. K provedení této analýzy použijte QueryHelpers třídu ze Microsoft.AspNetCore.WebUtilities sestavení:
@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);
}
}
}
Pokud uživatel požádal o identifikátor URI http://www.contoso.com/pizzas?extratopping=Pineapple, při nasazení předchozí komponenty by se na vykreslené stránce zobrazila zpráva "Chci přidat tuto přísadu: Pineapple".
Objekt NavigationManager můžete také použít k odeslání uživatelů do jiné komponenty v kódu voláním metody 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");
}
}
Note
Řetězec, který předáte NavigateTo() metodě, je absolutní nebo relativní identifikátor URI, kam chcete odeslat uživatele. Ujistěte se, že máte na této adrese nastavenou komponentu. V předchozím kódu komponenta s direktivou zpracovává tuto trasu @page "/buypizza" .
Použití komponent NavLink
V jednom z předchozích příkladů byl kód použit k získání hodnoty NavigationManager.BaseUri, kterou použil k nastavení atributu href značky <a> na domovskou stránku. V Blazoru použijte komponentu NavLink k vykreslení <a> značek, protože přepíná active třídu CSS, když atribut odkazu href odpovídá aktuální adrese URL. Upravením třídy active můžete uživateli zřetelně ukázat, který navigační odkaz patří k aktuální stránce.
Když použijete NavLink, příklad odkazu na domovskou stránku vypadá jako následující kód:
@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;
}
}
Atribut Match v komponentě NavLink slouží ke správě, když je odkaz zvýrazněný. Existují dvě možnosti:
-
NavLinkMatch.All: Když použijete tuto hodnotu, odkaz se zvýrazní jenom jako aktivní odkaz, pokud se shoduje
hrefs celou aktuální adresou URL. -
NavLinkMatch.Prefix: Když použijete tuto hodnotu, odkaz se zvýrazní jako aktivní, když odpovídá
hrefprvní části aktuální adresy URL. Předpokládejme například, že jste měli odkaz<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Tento odkaz by se zvýraznil jako aktivní, pokud by aktuální adresa URL bylahttp://www.contoso.com/pizzasa rovněž pro jakékoli umístění v této adrese URL, napříkladhttp://www.contoso.com/pizzas/formaggio. Toto chování může uživateli pomoct pochopit, kterou část webu si právě prohlíží.