Blazor 路由模板参数详解（从零开始掌握 Blazor 动态路由传参）

什么是 Blazor 路由模板参数？

Blazor 的路由系统基于 @page 指令。你可以在页面顶部使用该指令定义访问该页面的 URL 路径。而路由模板参数就是在路径中嵌入变量，例如 /product/{id}，其中 {id} 就是一个参数。

当你访问 /product/123 时，Blazor 会自动将 123 赋值给页面中的一个名为 Id 的属性（前提是命名匹配）。这种机制就是 Blazor 动态路由 的核心。

基本用法：定义带参数的路由

假设我们要创建一个用户详情页，URL 格式为 /user/5，其中 5 是用户 ID。我们这样写：

@page "/user/{Id}"<h3>用户 ID: @Id</h3>@code {    [Parameter]    public string Id { get; set; }}

注意：{Id} 必须与 C# 属性名 Id 完全一致（区分大小写）。[Parameter] 特性告诉 Blazor 这个属性将接收路由参数。

支持的数据类型

Blazor 路由参数默认是字符串类型，但你可以指定其他类型，如 int、long、Guid 等。例如：

@page "/product/{ProductId:int}"@code {    [Parameter]    public int ProductId { get; set; }}

这里 {ProductId:int} 表示只接受整数类型的参数。如果用户输入 /product/abc，Blazor 将无法匹配该路由，返回 404 页面。

可选参数与默认值

你也可以设置可选参数。只需在参数后加问号 ?，并提供默认值：

@page "/search/{Keyword?}"@code {    [Parameter]    public string Keyword { get; set; } = "所有商品";}

这样，访问 /search 或 /search/手机 都是合法的。

多个路由参数

你还可以在一个页面中使用多个参数：

@page "/order/{OrderId:int}/{Status}"@code {    [Parameter] public int OrderId { get; set; }    [Parameter] public string Status { get; set; }}

此时 URL 可能是 /order/1001/shipped。

常见问题与 SEO 关键词总结

很多初学者在使用 Blazor 页面传参 时会遇到参数未绑定、类型不匹配等问题。记住以下几点：

• 属性名必须与路由模板中的参数名完全一致；
• 使用 [Parameter] 特性标记；
• 非字符串类型需在路由中声明（如 :int）；
• 可选参数需加 ? 并设置默认值。

掌握这些技巧后，你就能轻松实现 Blazor 路由参数、Blazor 模板参数、Blazor 页面传参 和 Blazor 动态路由 的各种应用场景了！

祝你在 Blazor 开发之旅中一路顺风！