Blazor 页面间传数据,核心看场景:路由跳转用 URL 参数,组件嵌套用 参数绑定,跨页面/跨组件共享用 状态管理(如 Cas#%#$#%@%@%$#%$#%#%#$%@_b5fde512c76571c8afd6a6089eaaf42aingParameter、服务注入或第三方库)。不依赖 JS,全 C# 驱动。
用 NavigationManager 带参数跳转(推荐给简单值)
适合传递 ID、名称等轻量、可序列化的值。本质是拼 query string 或使用路由模板参数。
定义带参数的路由,比如:@page "/product/{id:int}",然后在组件里用 [Parameter] public int Id { get; set; } 接收
跳转时用 NavigationManager.NavigateTo("/product/123"),框架自动解析并赋值
想传多个或非路由参数?用 query string:NavigationManager.NavigateTo("/search?keyword=blazor&sort=date"),再用 Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery解析
用组件参数(@bind / [Parameter])父子传值
不是“页面之间”,而是父组件渲染子组件时直接传——适合布局页、弹窗、表单等嵌套结构。
子组件声明:[Parameter] public string Title { get; set; },支持双向绑定加 [Parameter] public EventCallback<string> TitleChanged { get; set; }</string>
父组件调用:<productcard></productcard>,修改子组件内 Title 会自动同步回父组件 注意:仅限直系父子;跨层级需靠 CascadingParameter 或服务
用服务(Scoped Service)实现跨页面状态共享
适合登录态、用户偏好、筛选条件等需要在多个页面间保持一致的数据。
注册一个 scoped 服务(如AppState),里面放
public string SearchTerm { get; set; } 和 public event Action OnChange;在
Program.cs注册:
builder.Services.AddScoped<appstate>();</appstate>各页面通过
[Inject] AppState State { get; set; } 访问,改值后触发 State.OnChange?.Invoke(),订阅方用
State.OnChange += StateHasChanged;响应 更简洁可选
Microsoft.AspNetCore.Components.Forms.EditContext或第三方如
Blazored.LocalStorage持久化
用 CascadingParameter 实现“上下文式”透传
适合主题、语言、权限等全局但不频繁变更的配置,避免层层手动传参。
在根组件(如App.razor或
MainLayout.razor)用
<cascadingvalue value="themeService">...</cascadingvalue>包裹内容 任意后代组件声明:
[CascadingParameter] public ThemeService Theme { get; set; },无需注入即可使用
注意:CascadingParameter 不自动响应变化,如需响应式,配合 EventCallback或
NotifyStateChanged手动刷新
基本上就这些。小项目用路由参数+服务就够了;中大型建议封装状态服务 + 可选引入 Fluxor 或 MudBlazor 的 StateContainer 管理复杂状态。关键不是“怎么传”,而是“谁该持有这份数据”——把状态放在最合适的生命周期层级里,比技巧更重要。
