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

【Blazor】| 总结/Edison Zhou

---

大家好，我是Edison。许久没有更新Blazor学习系列了，今天续更。

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类型：

@page "/myorders/{orderId:int}"

除了int之外，还阔以添加的约束有 bool, datetime, decimal, double, float, guid 和 long 类型。

小结

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

下一篇，我们学习一下在Blazor中的布局系统。

参考资料

Microsoft Learn，《使用Blazor构建Web应用程序》

年终总结：Edison的2021年终总结

数字化转型：我在传统企业做数字化转型

C#刷题：C#刷剑指Offer算法题系列文章目录

.NET面试：.NET开发面试知识体系

.NET大会：2020年中国.NET开发者大会PDF资料