Blazor中MudNavLink重复高亮，如何通过代码取消选中状态？

手动控制选中状态的方案 #

可以通过绑定Active属性并跟踪当前路由路径，强制控制每个MudNavLink的高亮状态：

1. 在组件中注入NavigationManager并跟踪路径 #

@inject NavigationManager NavManager
@implements IDisposable

@code {
    private string? _currentPath;

    protected override void OnInitialized()
    {
        // 初始化当前路径
        _currentPath = NavManager.Uri;
        // 监听路由变化事件
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        _currentPath = e.Location;
        // 通知组件更新UI
        StateHasChanged();
    }

    // 判断当前路径是否匹配菜单链接的Href
    private bool IsActive(string href)
    {
        // 处理根路径的特殊情况，避免匹配所有子路径
        if (href == "/")
        {
            return _currentPath == "/";
        }
        return _currentPath?.StartsWith(href, StringComparison.OrdinalIgnoreCase) == true;
    }

    // 清理事件订阅
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

2. 修改MudNavLink绑定Active属性 #

把每个MudNavLink的Active属性绑定到上面的IsActive方法，传入对应的Href值：

<MudNavMenu Bordered="true">
    <MudText Typo="Typo.h6" Class="px-4 pt-2">My App</MudText>
    <br />
    <br />
    <MudNavLink Href="/" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Primary" Active="@IsActive("/")">Dashboard</MudNavLink>
    <MudNavLink Href="/people" Icon="@Icons.Material.Filled.People" IconColor="Color.Secondary" Active="@IsActive("/people")">People</MudNavLink>
    <MudNavLink Href="/billing" Disabled="true" Icon="@Icons.Material.Filled.Receipt">Billing</MudNavLink>
    <MudNavGroup Title="Settings" Icon="@Icons.Material.Filled.Settings">
        <MudNavLink Href="/users" Icon="@Icons.Material.Filled.People" IconColor="Color.Success" Active="@IsActive("/users")">Users</MudNavLink>
        <MudNavLink Href="/security" Icon="@Icons.Material.Filled.Security" IconColor="Color.Info" Active="@IsActive("/security")">Security</MudNavLink>
    </MudNavGroup>
</MudNavMenu>

问题原因分析 #

这个问题确实和.NET 8 Blazor的InteractiveServer渲染模式有关，MudBlazor的内置路由匹配逻辑在该模式下可能存在兼容性问题，导致组件无法正确识别路由变化并更新旧项的高亮状态。手动绑定Active属性可以完全绕过组件的自动判断逻辑，直接通过当前路由路径精确控制每个菜单的选中状态。

另外，也可以尝试升级MudBlazor到最新稳定版本，官方后续的更新通常会修复.NET版本适配的问题，但手动控制的方案可以作为即时解决手段。

内容的提问来源于stack exchange，提问作者Lizzzzi