.NET Maui：点击TabBar项时如何重置导航？

问题场景 #

我在研究.NET Maui的TabBar导航机制时遇到了一个问题：TabBar包含两个底部标签，第二个标签显示项目列表页，点击列表项可以正常跳转到详情页，但切换到第一个标签后再切回第二个标签时，显示的不是列表页，而是之前打开过的详情页。

我的TabBar配置如下：

<Shell
    x:Class="AthleticAlliance.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AthleticAlliance.Views"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False">

    <TabBar>
        <Tab Title="Dashboard" Icon="home_black_24dp.svg" Route="MainPage">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="Workouts" Icon="list_black_24dp.svg" Route="workouts">
            <ShellContent ContentTemplate="{DataTemplate local:WorkoutListPage}"/>
        </Tab>
    </TabBar>
</Shell>

详情页的路由注册代码（AppShell.xaml.cs）：

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(WorkoutDetailsPage), typeof(WorkoutDetailsPage));
    }
}

问题原因 #

.NET Maui Shell的每个Tab都会维护独立的导航栈，当你从列表页跳转到详情页时，这个操作会被添加到该Tab的导航栈中。切换Tab时，Shell会保留每个Tab的导航栈状态，所以切回第二个Tab时，会恢复到最后停留的页面（也就是详情页）。

解决方案 #

1. 在页面按钮事件中返回根页面 #

可以在详情页的返回按钮点击事件中，调用Navigation.PopToRootAsync()，直接回到当前Tab的根页面（列表页）。这样当切换Tab再回来时，导航栈已经回到了根，就会显示列表页：

private void ImageButton_Clicked(object sender, EventArgs e)
{
    Navigation.PopToRootAsync();
}

2. 在ViewModel中实现返回根页面 #

如果想在ViewModel中处理返回逻辑（避免代码耦合在页面中），可以通过Shell.Current.Navigation来调用PopToRootAsync()，因为ViewModel无法直接访问页面的Navigation对象，而Shell.Current可以全局获取导航实例：

// ViewModel中的方法
public async Task GoBackToRoot()
{
    await Shell.Current.Navigation.PopToRootAsync();
}

或者也可以使用路由导航的方式，直接跳转到当前Tab的根路由：

await Shell.Current.GoToAsync("//workouts");

这里的//表示跳转到指定路由的根节点，对应Tab的Route属性值workouts。

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