Blazor增强式导航标签页问题：TabName为空及页面重渲染

解决TabName为空问题 #

要正确获取路由参数并赋值给TabName，有两种常用实现方式：

1. 组件直接绑定路由参数 #

在页面组件中通过[Parameter]属性绑定路由参数，配合参数化@page指令：

@page "/tabs/{TabName}"
@page "/tabs" <!-- 可选：默认路由，TabName为空时使用预设默认值 -->

@code {
    [Parameter]
    public string? TabName { get; set; } = "DefaultTab"; // 设置默认值避免空值
}

当导航到/tabs/Profile这类路由时，TabName会自动被赋值为Profile。

2. 通过RouteData获取参数（适用于布局/全局组件） #

如果需要在布局组件或全局组件中获取路由参数，注入RouteData并在参数更新时解析：

[Inject]
public RouteData RouteData { get; set; } = default!;

private string? TabName { get; set; }

protected override void OnParametersSet()
{
    if (RouteData.RouteValues.TryGetValue("TabName", out var tabValue))
    {
        TabName = tabValue?.ToString();
    }
}

避免整页重渲染 #

整页重渲染通常是路由配置或导航方式错误导致的，按以下步骤修复：

• 统一路由指向同一组件：所有标签页路由都指向同一个组件，通过TabName参数区分内容，而非给每个标签页单独配置@page指向不同组件。
• 禁用强制重载导航：调用NavigationManager.NavigateTo时，不要设置forceLoad=true（默认值为false，会自动使用增强式导航）。
• 确认增强式导航启用：在Program.cs中确保正确注册交互式服务：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

并在App.razor中使用<Routes>组件管理路由。

简便实现方案：动态组件+路由参数 #

结合路由参数绑定和DynamicComponent，可以快速实现无刷新标签页切换：

@page "/tabs/{TabName}"
@inject NavigationManager NavManager

<!-- 标签页导航按钮 -->
<div class="tab-nav">
    <button @onclick="() => NavManager.NavigateTo("/tabs/Profile")">个人资料</button>
    <button @onclick="() => NavManager.NavigateTo("/tabs/Settings")">设置</button>
    <button @onclick="() => NavManager.NavigateTo("/tabs/Notifications")">通知</button>
</div>

<!-- 动态渲染对应标签组件 -->
<div class="tab-content">
    <DynamicComponent Type="@GetTargetComponent(TabName)" />
</div>

@code {
    [Parameter]
    public string? TabName { get; set; } = "Profile";

    private Type? GetTargetComponent(string? tabName)
    {
        return tabName switch
        {
            "Profile" => typeof(ProfileTab),
            "Settings" => typeof(SettingsTab),
            "Notifications" => typeof(NotificationsTab),
            _ => typeof(ProfileTab)
        };
    }
}

这种方式下，切换标签仅更新动态组件的类型，不会触发整页重渲染，同时TabName参数能自动绑定路由值。

内容的提问来源于stack exchange，提问作者Edson V. Schmitt