MAUI Shell单页转标签页导航报错及返回箭头缺失问题咨询

要实现从ProductsPage导航到同一栈内的Tab页面，并且Tab页面能正常显示返回箭头，核心是调整Shell的路由层级，把Tab页面设为ProductsPage的子路由，而不是顶级路由。

步骤1：修改AppShell结构 #

将原来独立的TabBar嵌套到Products对应的路由层级下，让ProductPage和ProductDetailsPage成为ProductsPage的子页面：

<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MyApp.Views">

    <ShellContent Route="login" FlyoutItemIsVisible="False" ContentTemplate="{DataTemplate views:LoginPage}" />

    <!-- 将Products列表页和Tab子页整合到同一个路由层级 -->
    <FlyoutItem Title="Products" Route="products">
        <!-- 主页面：产品列表 -->
        <ShellContent ContentTemplate="{DataTemplate views:ProductsPage}" />
        
        <!-- 子Tab页：作为products路由的子页面 -->
        <TabBar>
            <Tab Title="Product" Route="product">
                <ShellContent ContentTemplate="{DataTemplate views:ProductPage}" />
            </Tab>
            <Tab Title="Details" Route="details">
                <ShellContent ContentTemplate="{DataTemplate views:ProductDetailsPage}" />
            </Tab>
        </TabBar>
    </FlyoutItem>

</Shell>

步骤2：使用相对路由导航 #

在ProductsPage的ViewModel中，直接使用相对路由导航，无需添加///前缀：

await Shell.Current.GoToAsync($"product?id={product.Id}");

此时生成的路由就是//products/product，完全符合你的预期。切换Tab时，路由会自动变为//products/details，两个页面都属于ProductsPage的导航栈，原生返回箭头会正常显示，点击即可回到ProductsPage。

补充：接收导航参数 #

在ProductPage的ViewModel中，可以通过[QueryProperty]属性接收传递的id参数：

[QueryProperty(nameof(ProductId), "id")]
public string ProductId { get; set; }

// 在属性变更时加载对应产品数据
private void OnProductIdChanged()
{
    // 根据ProductId加载产品详情逻辑
}

原问题原因分析 #

你之前使用///product导航时，是直接将顶级TabBar作为新的根页面，替换了原来的ProductsPage导航栈，因此没有返回箭头。调整路由层级后，Tab页面成为ProductsPage的子页面，导航时是在原栈中添加新页面，自然保留返回功能。

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