Blazor导航栏菜单按需显示：仅首页展示指定菜单

问题分析 #

你之前的实现存在两个核心问题：

1. routeData未正确监听路由变化，无法实时同步当前页面状态
2. 各页面独立控制的hideMenu变量属于局部状态，导航栏组件无法跨页面感知状态变化

下面提供两种可靠的实现方案：

方案一：通过路由监听动态控制菜单（推荐） #

利用NavigationManager监听路由变化，直接根据当前路径判断是否显示菜单，无需额外状态管理。

@inject NavigationManager NavManager
@implements IDisposable

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <!-- 首页菜单 -->
            <li class="nav-item">
                <a class="nav-link" href="landingpage">Landing Page</a>
            </li>

            <!-- Page 2 -->
            @if (!IsLandingPage)
            {
                <li class="has-dropdown">
                    <a href="/">page 2</a>
                </li>
            }

            <!-- Page 3 -->
            @if (!IsLandingPage)
            {
                <li class="has-dropdown">
                    <a href="/page3">page 3</a>
                </li>
            }
        </ul>
    </div>
</nav>

@code {
    private bool IsLandingPage = true;

    protected override void OnInitialized()
    {
        // 初始化时检查当前路由
        CheckCurrentRoute();
        // 订阅路由变化事件
        NavManager.LocationChanged += OnLocationChanged;
    }

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

    private void CheckCurrentRoute()
    {
        // 提取当前相对路径并判断是否为LandingPage
        var currentPath = NavManager.Uri.Replace(NavManager.BaseUri, string.Empty);
        IsLandingPage = currentPath.Equals("landingpage", StringComparison.OrdinalIgnoreCase);
    }

    // 取消订阅避免内存泄漏
    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

方案二：通过共享状态控制菜单（适合复杂场景） #

如果需要在多个组件间共享"菜单显示状态"，可以创建全局状态服务：

1. 创建全局状态类 #

public class AppState
{
    public bool ShowPageMenus { get; set; } = false;
    public event Action? OnStateChanged;

    public void UpdateMenuVisibility(bool isVisible)
    {
        ShowPageMenus = isVisible;
        OnStateChanged?.Invoke();
    }
}

2. 注册全局服务 #

在Program.cs中添加：

builder.Services.AddSingleton<AppState>();

3. 在LandingPage中更新状态 #

@inject NavigationManager NavManager
@inject AppState AppState

<input type="file" @onchange="HandleFileSelect" />

@code {
    private void HandleFileSelect(ChangeEventArgs e)
    {
        // 处理文件逻辑...
        
        // 更新状态为显示菜单
        AppState.UpdateMenuVisibility(true);
        // 跳转到首页
        NavManager.NavigateTo("/");
    }
}

4. 在导航栏中使用状态 #

@inject AppState AppState
@implements IDisposable

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="landingpage">Landing Page</a>
            </li>

            @if (AppState.ShowPageMenus)
            {
                <li class="has-dropdown">
                    <a href="/">page 2</a>
                </li>
                <li class="has-dropdown">
                    <a href="/page3">page 3</a>
                </li>
            }
        </ul>
    </div>
</nav>

@code {
    protected override void OnInitialized()
    {
        AppState.OnStateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        AppState.OnStateChanged -= StateHasChanged;
    }
}

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