.NET MAUI Shell应用登出后返回登录页隐藏标签页的实现方法

问题场景 #

在.NET MAUI Shell应用中，登录页LogInPage注册在TabBar之外，登录时通过await Shell.Current.GoToAsync("//Main")进入主标签页。但登出操作后，虽然已清空用户信息并调用await Shell.Current.GoToAsync(nameof(LogInPage))跳转回登录页，底部标签页依然显示，无法达到预期效果。

解决方案 #

核心是通过绝对路由跳转到登录页，确保登录页脱离主标签页的导航上下文，具体步骤如下：

1. 给登录页设置明确的路由
   在AppShell.xaml中，为登录页的ShellContent添加Route属性，指定唯一路由名称：

   <Shell
   x:Class="Xen.Presentation.Mobile.AppShell"
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:Xen.Presentation.Mobile"
   xmlns:views="clr-namespace:Xen.Presentation.Mobile.Views"
   Shell.FlyoutBehavior="Disabled">
   
   <!-- 给登录页添加Route属性 -->
   <ShellContent Route="LogIn" Title="LogIn" ContentTemplate="{DataTemplate views:LogInPage}" />
   
   <TabBar Route="Main">
       <Tab Title="Inicio" Icon="home.png">
           <ShellContent Title="Home" ContentTemplate="{DataTemplate views:HomePage}" />
       </Tab>
       
       <!-- Other tabs -->
       
       <Tab Title="Perfil" Icon="user.png">
           <ShellContent Title="Perfil" ContentTemplate="{DataTemplate views:UserPage}" />
       </Tab>
   </TabBar>
   
   <ShellContent Title="Professional" ContentTemplate="{DataTemplate views:ProfessionalPage}" />
   
   <!-- Other pages -->
   
   </Shell>
   

2. 修改登出逻辑，使用绝对路由跳转
   将登出时的导航代码改为使用绝对路由//LogIn，确保跳转到根级别的登录页，脱离TabBar的导航栈：

   private async Task OnLogout()
   {
       App.LoggedInUser = null;
       // 使用绝对路由跳转到登录页，彻底脱离主标签页上下文
       await Shell.Current.GoToAsync("//LogIn");
       
       // 可选：清空导航栈，防止用户通过返回键回到已登出的主页面
       Shell.Current.Navigation.NavigationStack.Clear();
   }
   

原理说明 #

之前使用nameof(LogInPage)跳转时，属于相对导航，登录页被添加到了当前Main标签页的导航栈中，因此底部标签页会持续显示。而使用绝对路由//LogIn时，Shell会直接定位到根级别的登录页，此时登录页不在任何TabBar的上下文内，底部标签页自然会隐藏。

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