Blazor 导航时通过URL传递参数的方法

Blazor导航传参主要通过路由模板实现：路径参数（如@page "/counter/{id:int}"）用于必填标识性数据，自动绑定到[Parameter]属性；查询参数需手动解析，适合非必需或动态参数；NavLink仅支持字符串插值传路径参数。

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。

Text Mark

处理文本内容的AI助手

113

查看详情

• 例如：
  <navlink href="@(%24">查看商品</navlink>
• 注意：不能在 Href 中写方法调用或复杂表达式，只能是纯字符串插值
• 如果参数来自异步数据，建议先确保值已就绪，或用普通 <a></a> 标签替代

注意事项与最佳实践

避免常见坑，让参数传递更健壮。

• 路径参数优先用于标识性、必填、有明确语义的数据（如 /user/123）；查询参数适合过滤、分页、排序等场景
• 中文或特殊字符务必 Uri.EscapeDataString() 编码后再拼入 URL，服务端会自动解码
• 组件内参数变更时（如用户点击不同链接），若需响应变化，重写 OnParametersSetAsync 而非 OnInitialized
• 服务端 Blazor 注意：URL 参数由服务器解析；WASM Blazor 则由浏览器地址栏触发，路由由客户端处理

基本上就这些。路径参数简洁直接，查询参数灵活通用，搭配使用就能覆盖大多数导航传参需求。

以上就是Blazor 导航时通过URL传递参数的方法的详细内容，更多请关注php中文网其它相关文章！