Use o componente do roteador Blazor para controlar a navegação do seu aplicativo
- 5 minutos
O sistema de roteamento da Blazor fornece opções flexíveis para garantir que as solicitações do usuário cheguem a um componente que possa lidar com elas e retornar as informações desejadas pelo usuário.
Suponha que você esteja trabalhando no site da empresa de entrega de pizza. Você deseja configurar o site para que as solicitações de detalhes de pizza e detalhes de cobertura personalizada sejam tratadas pelo mesmo componente. Você concluiu essa fase, mas o teste mostra que as solicitações de topping estão recebendo uma mensagem de erro. Você precisa corrigir esse problema.
Aqui, você aprende a configurar rotas em Blazor usando a @page diretiva .
Note
Os blocos de código nesta unidade são exemplos ilustrativos. Você escreve seu próprio código na próxima unidade.
Usando modelos de rota
Quando o usuário faz uma solicitação para uma página do seu aplicativo Web, ele pode especificar o que deseja ver com as informações no URI. Por exemplo:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Após o protocolo e endereço do site, este URI indica que o usuário quer saber sobre pizzas margherita. Além disso, a string de consulta após o ponto de interrogação indica que estão interessados num topping extra de abacaxi. No Blazor, você usa o roteamento para garantir que cada solicitação seja enviada para o componente que pode responder melhor. Você também usa o roteamento para garantir que o componente tenha todas as informações necessárias para exibir o que o usuário deseja. Neste caso, você pode querer enviar a solicitação para o componente Pizzas e para que esse componente exiba uma pizza margherita com informações sobre como adicionar abacaxi a ele.
Blazor encaminha pedidos com um componente especializado chamado Router. O componente é configurado no App.razor da seguinte forma:
<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>
Quando o aplicativo é iniciado, Blazor verifica o AppAssembly atributo para descobrir qual assembly ele deve verificar. Ele verifica esse assembly em busca de componentes que tenham o RouteAttribute presente. Blazor usa esses valores para compilar um objeto RouteData que especifica como as solicitações são roteadas para componentes. Ao codificar o aplicativo, você usa a @page diretiva em cada componente para corrigir o RouteAttribute.
No código anterior, a <Found> tag especifica o componente que manipula o roteamento em tempo de execução: o componente RouteView . Este componente recebe o objeto RouteData e quaisquer parâmetros do URI ou da cadeia de caracteres de consulta. Em seguida, ele renderiza o componente especificado e seu layout. Você pode usar a <Found> tag para especificar um layout padrão, que é usado quando o componente selecionado não especifica um layout com a @layout diretiva. Você aprenderá mais sobre layouts mais adiante neste módulo.
<Router> No componente , você também pode especificar o que é retornado ao usuário quando não há uma rota correspondente, usando a <NotFound> tag . O exemplo anterior retorna um único <p> parágrafo, mas você pode renderizar HTML mais complexo. Por exemplo, ele pode incluir um link para a home page ou uma página de contato para administradores de site.
Utilização da diretiva @page
Em um componente Blazor, a @page diretiva especifica que o componente deve lidar com solicitações diretamente. Você pode especificar um RouteAttribute na diretiva passando-o @page como uma cadeia de caracteres. Por exemplo, esse atributo especifica que a página manipula solicitações para a rota /Pizzas :
@page "/Pizzas"
Se você quiser especificar mais de uma rota para o componente, use duas ou mais @page diretivas, como neste exemplo:
@page "/Pizzas"
@page "/CustomPizzas"
Obter informações de localização e navegar com o NavigationManager
Suponha que você escreva um componente para manipular um URI solicitado pelo usuário, como http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Ao escrever um componente, você pode precisar de acesso a informações de navegação como:
- O URI completo atual, como
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - O URI de base, como
http://www.contoso.com/. - O caminho relativo da base, como
pizzas/margherita. - A cadeia de caracteres de consulta, como
?extratopping=pineapple.
Você pode usar um NavigationManager objeto para obter todos esses valores. Você deve injetar o objeto no componente e, em seguida, você pode acessar suas propriedades. Esse código usa o NavigationManager objeto para obter o URI base do site e, em seguida, usa-o para definir um link para a página inicial:
@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;
}
}
Para acessar a cadeia de caracteres de consulta, você deve analisar o URI completo. Para executar essa análise, use a QueryHelpersMicrosoft.AspNetCore.WebUtilities classe do assembly:
@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);
}
}
}
Com o componente anterior implantado, se um usuário solicitasse o URI http://www.contoso.com/pizzas?extratopping=Pineapple, ele veria a mensagem "Quero adicionar esta cobertura: Abacaxi" na página renderizada.
Você também pode usar o NavigationManager objeto para enviar seus usuários para outro componente no código chamando o NavigationManager.NavigateTo() método:
@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
A cadeia de caracteres que você passa para o NavigateTo() método é o URI absoluto ou relativo para onde você deseja enviar o usuário. Certifique-se de que tem um componente configurado nesse endereço. No código anterior, um componente com a @page "/buypizza" diretiva manipula essa rota.
Usar componentes NavLink
Em um dos exemplos anteriores, o código foi usado para obter o NavigationManager.BaseUri valor e usá-lo para definir o href atributo de uma <a> tag para a página inicial. Em Blazor, use o componente NavLink para renderizar tags <a> pois ele altera uma classe CSS active quando o atributo de link href corresponde à URL atual. Ao estilizar a active classe, você pode deixar claro para o usuário qual link de navegação é para a página atual.
Quando você usa NavLink, o exemplo de link da página inicial se parece com o seguinte código:
@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;
}
}
O Match atributo no componente NavLink é usado para gerenciar quando o link é realçado. Existem duas opções:
-
NavLinkMatch.All: Quando você usa esse valor, o link só é realçado como o link ativo quando corresponde
hrefa toda a URL atual. -
NavLinkMatch.Prefix: Quando você usa esse valor, o link é realçado como ativo quando
hrefcorresponde à primeira parte da URL atual. Suponha, por exemplo, que você tinha o link<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Esse link seria destacado como ativo quando o URL atual estivessehttp://www.contoso.com/pizzase para qualquer local dentro desse URL, comohttp://www.contoso.com/pizzas/formaggio. Esse comportamento pode ajudar o usuário a entender qual seção do site ele está visualizando no momento.