Blazor MAUI集成共享UI库时导航功能失效问题咨询

你遇到的问题核心是Blazor内部导航和MAUI Shell导航是两套独立的体系：每个ShellContent对应一个独立的BlazorWebView，NavigationManager.NavigateTo()只会在当前WebView内部处理路由，无法触发Shell的Tab页面切换。

要跨Tab跳转，得用MAUI Shell的导航API，而不是单靠Blazor的NavigationManager。

方法一：在Blazor组件里调用MAUI Shell导航 #

在Login.razor里修改代码，注入MAUI的服务来触发Shell导航：

@inject IServiceProvider ServiceProvider

<button @onclick="JumpToSample">去Sample页面</button>

@code {
    private async Task JumpToSample()
    {
        // 获取Shell导航管理器
        var shellNav = ServiceProvider.GetRequiredService<IShellNavigationManager>();
        // 跳转到Shell中配置的Sample路由，路由格式要和你的Shell定义匹配
        await shellNav.GoToAsync("//MainTab/Sample");
    }
}

注意：//MainTab/Sample里的MainTab是你的TabBar名称，Sample是对应ShellContent的Route属性值，要和AppShell.xaml里的配置一致。

方法二：把所有Blazor页面放到同一个WebView里 #

如果不需要每个Tab对应独立的WebView，可以只在Shell里放一个ShellContent，内部的BlazorWebView包含所有路由：

<TabBar>
    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainBlazorHost}" />
</TabBar>

然后在MainBlazorHost的BlazorWebView里配置好Login和Sample的路由，这样NavigationManager.NavigateTo("/sample")就能正常在同一个WebView内跳转。

• 别混淆Blazor内部路由和MAUI Shell路由，跨Tab切换必须用Shell的GoToAsync方法
• 调用GoToAsync时的路由要严格对应Shell的层级结构，根路由用//开头可避免路径歧义

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