Blazor 路由与参数传递详解（从零开始掌握 Blazor 页面导航与数据交互）

一、什么是 Blazor 路由？

Blazor 使用基于组件的路由系统。每个页面（通常是 .razor 文件）通过 @page 指令定义自己的路由路径。当用户访问某个 URL 时，Blazor 会自动匹配对应的组件并渲染它。

示例：定义一个简单页面

<!-- Pages/Counter.razor -->@page "/counter"<h3>计数器页面</h3><p>当前计数：@currentCount</p>@code {    private int currentCount = 0;}

上面的代码中，@page "/counter" 告诉 Blazor：当用户访问 /counter 路径时，就显示这个组件。

二、如何传递参数？

在实际开发中，我们经常需要从一个页面跳转到另一个页面，并携带一些信息（比如用户 ID、产品编号等）。Blazor 支持多种参数传递方式，下面介绍最常用的两种：路由参数 和 查询字符串参数。

1. 路由参数（Route Parameters）

路由参数直接嵌入在 URL 路径中，适合传递必填且结构化的数据。

<!-- Pages/UserDetail.razor -->@page "/user/{Id:int}"<h3>用户详情</h3><p>用户 ID：@Id</p>@code {    [Parameter]    public int Id { get; set; }}

在这个例子中：

• {Id:int} 表示 URL 中必须有一个整数类型的参数，并绑定到组件的 Id 属性。
• 访问 /user/123 时，Id 的值就是 123。

2. 查询字符串参数（Query String Parameters）

查询字符串参数出现在 URL 的问号（?）后面，适合传递可选参数。

<!-- Pages/Search.razor -->@page "/search"@inject NavigationManager Navigation<h3>搜索结果</h3><p>关键词：@keyword</p>@code {    private string keyword = "";    protected override void OnInitialized()    {        var uri = Navigation.ToAbsoluteUri(Navigation.Uri);        var query = System.Web.HttpUtility.ParseQueryString(uri.Query);        keyword = query["q"] ?? "未指定";    }}

访问 /search?q=Blazor 时，页面会显示“关键词：Blazor”。

三、页面间跳转（导航）

在 Blazor 中，可以使用 NavigationManager 服务进行程序化导航。

@inject NavigationManager Navigation<button @onclick="GoToUser">查看用户 42</button>@code {    private void GoToUser()    {        Navigation.NavigateTo("/user/42");    }}

点击按钮后，页面将跳转到 /user/42，并显示对应用户信息。

四、高级技巧：可选参数与约束

Blazor 路由支持参数约束，例如 :int、:string、:bool 等，确保传入的数据类型正确。你还可以使用通配符捕获剩余路径：

@page "/files/{*fileRoute}"@code {    [Parameter] public string? fileRoute { get; set; }}

访问 /files/folder/document.txt 时，fileRoute 的值为 "folder/document.txt"。

总结

通过本教程，你应该已经掌握了 Blazor 路由的基本用法、如何使用 Blazor 参数传递在页面间共享数据，以及如何实现 Blazor 页面导航。这些知识是构建动态 Blazor 应用的基础。同时，合理的 Blazor 组件通信设计能让你的应用更清晰、更易维护。

小贴士：始终对传入的参数做有效性验证，避免因非法输入导致应用崩溃！