Maui Blazor切换标签后Razor页面导航按钮失效原因咨询

问题根源 #

MauiBlazorPlatformTabs模板的核心机制是每个标签页对应独立的BlazorWebView实例，每个实例都维护自己的导航栈、NavigationManager上下文和Blazor组件状态：

• 首次进入首页时，当前激活的是第一个标签页的BlazorWebView，按钮绑定的NavigationManager属于该实例，导航操作正常执行。
• 切换标签页后，原首页对应的BlazorWebView会被销毁或进入休眠状态；切回首页时，模板可能重建了新的BlazorWebView实例，但按钮的点击事件未正确关联到新实例的NavigationManager，旧实例的导航操作也无法影响当前激活的UI上下文，最终导致导航失效。

解决方案 #

1. 使用全局导航服务（推荐）

创建单例全局导航服务，统一处理导航逻辑，摆脱对单个BlazorWebView实例的依赖：

// 全局导航服务类
public class GlobalNavigationService
{
    private readonly NavigationManager _navigationManager;

    public GlobalNavigationService(NavigationManager navigationManager)
    {
        _navigationManager = navigationManager;
    }

    public void NavigateTo(string uri, bool forceLoad = false)
    {
        _navigationManager.NavigateTo(uri, forceLoad);
    }
}

在Program.cs中注册为单例：

builder.Services.AddSingleton<GlobalNavigationService>();

页面中注入该服务替代原NavigationManager：

@page "/"
@inject GlobalNavigationService NavService

<h1>Hello, world!</h1>
<button @onclick="Navigate">Click</button>

@code{
    private void Navigate()
    {
        NavService.NavigateTo("/Test");
    }
}

2. 缓存标签页WebView实例

修改模板的Tab切换逻辑，避免每次切换时销毁重建BlazorWebView。找到管理Tab内容的代码（通常在MainPage.xaml.cs中），将每个Tab对应的BlazorWebView实例缓存起来，切换时直接复用，保证导航上下文不丢失。

3. 强制导航重载（临时方案）

如果不想调整全局逻辑，可以在导航时添加forceLoad: true参数，强制页面重新加载：

private void Navigate()
{
    NavigationManager.NavigateTo("/Test", forceLoad: true);
}

该方法能临时解决问题，但会触发页面重渲染，影响用户体验，仅适合快速验证场景。

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