Blazor学习之旅(6)路由系统

Edison Zhou

发布于 2023-07-27 21:16:40

3170

发布于 2023-07-27 21:16:40

文章被收录于专栏：EdisonTalk

大家好，我是Edison。

Blazor 的路由系统就和 ASP.NET MVC的路由系统一样，可以为我们提供灵活的选项，可用于确保用户请求到达可处理它们并返回用户想要的信息的组件。

本篇，我们来了解下在Blazor中的路由系统。

使用路由模板

在 Blazor 中，使用路由来确保将每个请求发送到最适合的组件，并且该组件具有显示用户所需内容的全部信息。

Blazor 使用名为 Router 组件的专用组件路由请求。它在 App.razor 中配置如下：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

应用启动时，Blazor 会检查 AppAssembly 属性，以了解它应扫描哪个程序集。它会扫描该程序集，以寻找具有 RouteAttribute 的组件。Blazor 使用这些值编译 RouteData 对象，该对象指定如何将请求路由到组件。编写应用代码时，可以在每个组件中使用 @page 指令来修复 RouteAttribute。

在上面的模板中，标记指定了在运行时处理路由的组件：RouteView组件。此组件接收 RouteData 对象以及来自 URI 或查询字符串的任何参数。然后，它呈现指定的组件及其布局。可以使用标记来指定默认布局，当所选组件未通过 @layout 指令指定布局时，将使用该布局。本模块稍后会详细介绍这些布局。

在组件中，还可使用标记指定在不存在匹配路由时返回给用户的内容。上面的示例返回单个

段落和错误消息提示"Sorry, there's nothing at this address."，但你可以呈现更复杂的 HTML。例如，可能包括指向主页或站点管理员联系人页面的链接。

使用@page指令

在 Blazor 组件中，@page 指令指定该组件应直接处理请求。

可以在 @page 指令中指定 RouteAttribute，方法是以字符串的形式传递它。例如，使用此属性指定页面处理对 /Todo 路由的请求：

@page "/Todo"

如果要指定到组件的多个路由，请使用两个或更多 @page 指令：

@page "/Todo"
@page "/TodoItems"

使用NavigationManager导航

在 Blazor 组件中，如果我们需要访问一些导航信息，如当前完整的URI、相对路径又或是查询字符串（QueryString）等，我们可以在代码中通过 NavigationManager 对象来获取所有的这些值。

需要注意的是，我们需要将其注入组件，才能访问其属性。如下代码所示，我们通过@inject指令完成了注入。

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

如果想要访问查询字符串（QueryString），则必须分析完整的URI了。我们可以使用 Microsoft.AspNetCore.WebUtilities 程序集中的

QueryHelpers 类执行此分析，如下代码所示：

@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()
  {
    StringValues extraTopping;
    var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
    if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out extraTopping))
    {
      ToppingName = System.Convert.ToString(extraTopping);
    }
  }
}

最后，我们还可以通过调用 NavigationManager.NavigateTo() 方法，使用 NavigationManager 对象将用户转交给代码中的另一个组件：

@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");
  }
}

使用NavLink组件

在 Blazor 中，使用 NavLink 组件来呈现标记，因为它在链接的 href 属性与当前 URL 匹配时将切换 active CSS 类。通过设置 active 类的样式，可以让用户清楚地了解当前页面对应哪个导航链接。

使用 NavLink 时，主页链接示例如以下代码所示：

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

NavLink 组件中的 Match 属性用于管理突出显示连接的时间，它有两个选项：

NavLinkMatch.All：使用此值时，只有在链接的 href 与当前 URL 完全匹配时，该链接才突出显示为活动链接。
NavLinkMatch.Prefix：使用此值时，当链接的 href 与当前 URL 的第一部分匹配时，该链接就突出显示为活动链接。例如，假设你拥有链接。当前 URL 为 http://www.mypizza.com/pizzas 及该 URL 中的任意位置（例如 http://www.mypizza.com/pizzas/formaggio）时，此链接将突出显示为活动链接。此行为可帮助用户了解自己当前正在查看网站的哪一部分。

使用路由参数

在日常开发中，有时候希望将URI中的其他部分用作呈现的页面中的值，例如：http://edtalk.com/favoritestar/jaychou。如果我们想要在Blazor中获取到jaychou，就可以使用路由参数。

下面的示例代码就展示了@page 指令中使用大括号来指定路由参数并为其命名。

@page "/Favorite/{favorite}"

<h1>Choose a Star</h1>

<p>Your favorite star is: @Favorite</p>

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

如果该路由参数并不是必须的，我们可以设置默认值，使其成为可选的路由参数。

@code {
  [Parameter]
  public string Favorite { get; set; }
  
  protected override void OnInitialized()
  {
    Favorite ??= "Fiorentina";
  }
}

假如用户尝试通过请求URI http://edtalk.com/favoritestar/jaychou/edisonchen 来指定两个最喜爱的明星，页面将显示："Your favorite start is : jaychou"，并忽略后续的"edisonchen"。因此，如果我们想要显示的是"jaychou/edisonchen"，那么我们可以捕获全部路由参数，只需要做以下一点点的修改，将星号 (*) 作为路由参数名称前缀即可捕获：

@page "/Favorite/{*favorites}"

<h1>Choose a Star</h1>

<p>Your favorites star are: @Favorites</p>

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

此外，我们可以对路由参数做类型限制，比如将其限制为一个int类型：