路由系统

Blazor中，路由系统负责根据浏览器请求的URL将请求映射到对应的组件上，这篇笔记我们学习Blazor中路由系统的使用。

路由组件

Blazor框架内置了路由组件<Router>，我们通常将其定义在根组件App.razor或者拆分到一个Routes.razor中，路由组件负责拦截传入的请求并呈现与请求URL相匹配的页面，下面是一个例子。

Components/Routes.razor

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Components/App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Gacfox.DemoBlazorServer.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

路由组件中，我们创建了<Router>元素，其中AppAssembly="typeof(Program).Assembly"指示Blazor路由系统使用当前程序集来查找页面组件。<Found>表示如果有匹配的路由则会执行其中的内容，Context="routeData"会把匹配到的路由信息（如路由参数等）存储到routeData变量中供后续使用。<RouteView>用来渲染当前路由匹配的页面组件，RouteData="routeData"将之前存储的路由数据传递给它，DefaultLayout="typeof(Layout.MainLayout)"配置了默认的布局为MainLayout。

页面定义路由匹配

在任意Blazor组件中，如果使用@page指令定义了路由，当浏览器访问对应URL时，该组件就会被渲染出来。

@page "/"

<h1>Hello, world!</h1>

路由参数解析

定义的路由可以带有参数，Blazor组件中我们可以解析这些参数，下面是一个例子。

@page "/Student/{Id:long}"

<h3>Student: @Id</h3>

@code {
    [Parameter]
    public long Id { get; set; }
}

代码中，Id是一个long类型的参数，{Id:long}也同时约束了参数的类型，如果类型不符合则路由不会匹配。如果不使用类型约束，默认使用字符串类型接收参数。

路由跳转

NavLink 链接组件

Blazor中，我们可以使用<NavLink>组件实现链接跳转，下面是一个例子。

@page "/"

<NavLink href="/weather">天气功能</NavLink>

<NavLink>组件的href属性指定了跳转的地址，该组件最终会被渲染为HTML的<a>标签。

手动触发路由切换

除了使用<NavLink>组件，我们也可以手动使用代码进行路由跳转。

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<button @onclick="HandleButtonClick">天气功能</button>

@code {
    private void HandleButtonClick()
    {
        Navigation.NavigateTo("/weather");
    }
}

由于用到了C#代码，我们的页面组件需要被定义为交互式的，因此指定了@rendermode InteractiveServer，这里我们还注入了一个NavigationManager的实例，这里当点击按钮时，我们调用了其NavigateTo()方法实现了页面跳转。

作者：Gacfox