在Blazor中,使用相同的.razor
页面进行部分导航(Partial Navigation)通常涉及到路由参数的使用。Blazor的路由系统允许你根据URL中的参数来动态加载内容。以下是如何实现这一功能的步骤:
/page/{id}
。Startup.cs
或Program.cs
文件中定义路由,确保它可以接受参数。app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapRoute(name: "default", pattern: "{controller}/{action=Index}/{id?}");
});
.razor
页面,该页面将用于显示基于{id}
参数的内容。@page "/page/{id}"
@inject NavigationManager NavigationManager
<h3>Page with ID: @Id</h3>
<p>This is the content for page with ID: @Id.</p>
@code {
[Parameter]
public string Id { get; set; }
protected override void OnParametersSet()
{
// 可以在这里处理参数变化
}
}
NavigationManager
来导航到具有特定{id}
的页面。@inject NavigationManager NavigationManager
<button @onclick="NavigateToPage">Go to Page with ID 123</button>
@code {
private void NavigateToPage()
{
NavigationManager.NavigateTo($"/page/123");
}
}
{id}
来显示不同的页面内容。{id}
参数。NavigationManager.NavigateTo($"/page/123");
{id}
参数的类型与组件中定义的类型匹配。[Parameter]
public int Id { get; set; }
Startup.cs
或Program.cs
中正确配置了路由。endpoints.MapRoute(name: "default", pattern: "{controller}/{action=Index}/{id?}");
通过以上步骤,你可以使用相同的.razor
页面进行基于{id}
的部分导航。
领取专属 10元无门槛券
手把手带您无忧上云