.NET MAUI Shell中从ContentPage导航至TabBar的路由问题

问题根源 #

你之前的AppShell结构存在错误：将TabBar嵌套在ShellContent内部，而ShellContent的ContentTemplate已指定MainPage（一个ContentPage），Shell路由系统无法识别内部的TabBar作为有效路由节点，导致找不到tabs路由。

正确解决方案 #

调整Shell的路由层级，让TabBar成为main路由的子级节点，这样相对导航生效且会自动显示返回按钮。

步骤1：修改AppShell.xaml结构 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiTabShell.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiTabShell"
    xmlns:pages="clr-namespace:MauiTabShell.Pages"
    Shell.FlyoutBehavior="Disabled"
>
    <!-- 将main作为根FlyoutItem，包含首页和tabs子路由 -->
    <FlyoutItem Route="main">
        <!-- 首页：main路由的默认页面 -->
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
        <!-- tabs子路由：用ShellSection包裹TabBar，作为main的下级路由 -->
        <ShellSection Route="tabs">
            <TabBar>
                <ShellContent Title="Page1" ContentTemplate="{DataTemplate pages:PageOne}" />
                <ShellContent Title="Page2" ContentTemplate="{DataTemplate pages:PageTwo}" />
                <ShellContent Title="Page3" ContentTemplate="{DataTemplate pages:PageThree}" />
            </TabBar>
        </ShellSection>
    </FlyoutItem>
</Shell>

步骤2：使用相对导航 #

在MainPage的按钮点击事件中，直接使用相对路由导航：

private async void Button_Clicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync("tabs");
}

关键说明 #

• 此结构中tabs是main路由的子级，相对导航"tabs"会从当前main路由的上下文找到目标，导航后自动显示返回按钮。
• 保留了Shell的依赖注入和参数传递功能，你可以在导航时添加参数，比如await Shell.Current.GoToAsync("tabs?param=value")，在TabBar的页面中通过QueryProperty接收。

为什么之前的尝试无效 #

1. 将TabBar与首页同级：此时tabs是根路由的同级节点，绝对导航//tabs会直接跳转到根级TabBar，没有返回按钮（因为不是子级路由）。
2. 注册TabbedPage：MAUI Shell与TabbedPage兼容性较差，Shell的路由系统更适合使用自身的TabBar组件。
3. 错误嵌套TabBar：ShellContent仅用于承载单个ContentPage，内部嵌套TabBar不会被Shell路由系统解析，导致路由无法识别。

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