Blazor 怎么在页面之间传递数据

来源:这里教程网 时间:2026-02-21 17:34:37 作者:

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 管理复杂状态。关键不是“怎么传”,而是“谁该持有这份数据”——把状态放在最合适的生命周期层级里,比技巧更重要。

相关推荐