Blazor 中导航时通过 URL 传递参数,主要靠路由模板(Route Template)和导航组件(如
NavigationManager或
<navlink></navlink>)配合实现。核心是把参数嵌入 URL 路径或作为查询字符串,服务端/客户端能自动解析并注入到目标组件中。
使用路由参数(Path Parameters)
这是最常用的方式,参数直接作为 URL 路径的一部分,需在组件顶部用
@page指令定义带占位符的路由。 在组件中声明路由,例如:
@page "/counter/{id:int}"
用 [Parameter]属性接收参数:
[Parameter] public int Id { get; set; }
导航时生成带参数的 URL:用
NavigationManager.NavigateTo("/counter/123"),或写死链接:<a href="/counter/456">跳转</a>支持类型约束(如
{id:int}、{name:string?}),不匹配会 404;可选参数加 ?,对应 C# 属性需可空或设默认值
使用查询字符串(Query String Parameters)
适合传递非必需、数量不定或非结构化参数,Blazor 不自动绑定,需手动解析。
导航时拼接查询参数:NavigationManager.NavigateTo("/search?keyword=blazor&page=2")
在目标组件中用 UriHelper(Server)或
NavigationManager.ToBaseRelativePath+
Microsoft.AspNetCore.WebUtilities.QueryHelpers解析:
var uri = new Uri(NavigationManager.Uri);<br>var query = QueryHelpers.ParseQuery(uri.Query);<br>if (query.TryGetValue("keyword", out var keyword)) { ... }
也可借助第三方库(如 Blazored.FluentValidation或自定义封装)简化处理
用 NavLink 传参(仅限路径参数)
<navlink></navlink>本身不支持动态传参,但可通过字符串插值生成带参数的
Href。 例如:
<navlink href="@(%24">查看商品</navlink>注意:不能在
Href中写方法调用或复杂表达式,只能是纯字符串插值 如果参数来自异步数据,建议先确保值已就绪,或用普通
<a></a>标签替代
注意事项与最佳实践
避免常见坑,让参数传递更健壮。
路径参数优先用于标识性、必填、有明确语义的数据(如/user/123);查询参数适合过滤、分页、排序等场景 中文或特殊字符务必
Uri.EscapeDataString()编码后再拼入 URL,服务端会自动解码 组件内参数变更时(如用户点击不同链接),若需响应变化,重写
OnParametersSetAsync而非
OnInitialized服务端 Blazor 注意:URL 参数由服务器解析;WASM Blazor 则由浏览器地址栏触发,路由由客户端处理
基本上就这些。路径参数简洁直接,查询参数灵活通用,搭配使用就能覆盖大多数导航传参需求。
