.NET MAUI Shell二级页面导航返回失效问题求助

问题描述 #

• 调用await Shell.Current.GoToAsync($"//{nameof(MainPage)}");导航到MainPage时，LoginPage从导航栈清除且无返回按钮，符合预期；
• 调用await Shell.Current.GoToAsync(nameof(PageOne));导航到PageOne时可正常返回；
• 导航到PageTwo后无法返回，需排查原因。

相关配置代码 #

MauiProgram.cs 服务注册 #

...

services.AddSingleton<LoginPage>();
services.AddSingleton<LoginViewModel>();

services.AddSingleton<MainPage>();
services.AddSingleton<MainViewModel>();

services.AddSingleton<PageOnePage>();
services.AddSingleton<PageOneViewModel>();

services.AddSingleton<PageTwoPage>();
services.AddSingleton<PageTwoViewModel>();

...

AppShell.xaml.cs 路由注册 #

Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
Routing.RegisterRoute(nameof(MainPage), typeof(MainPage));
Routing.RegisterRoute(nameof(PageOnePage), typeof(PageOnePage));
Routing.RegisterRoute(nameof(PageTwoPage), typeof(PageTwoPage));

AppShell.xaml ShellContent配置 #

<ShellContent
    Shell.NavBarIsVisible="true"
    Title="Login"
    ContentTemplate="{DataTemplate local:LoginPage}"
    Route="LoginPage" />

<ShellContent
    Shell.NavBarIsVisible="true"
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" />

    
<ShellContent
    Shell.NavBarIsVisible="true"
    Title="PageOne"
    ContentTemplate="{DataTemplate local:PageOnePage}"
    Route="PageOnePage" />

<ShellContent
    Shell.NavBarIsVisible="true"
    Title="PageTwo"
    ContentTemplate="{DataTemplate local:PageTwoPage}"
    Route="PageTwoPage" />

问题原因 #

你把所有页面都注册为Shell的根ShellContent，Shell中ShellContent属于顶级导航项（类似底部标签页），它们之间的切换是根级别导航，会直接重置导航栈，而非栈式导航。当你导航到PageTwo时，相当于切换到一个新的根标签页，此时导航栈中只有PageTwo，自然没有返回按钮。

至于PageOne能正常返回，大概率是实际导航上下文的偶然情况（比如从MainPage内部使用了相对路由导航，绕过了ShellContent的根切换逻辑），但这种全页面设为ShellContent的配置本身不符合Shell导航的最佳实践。

解决方案 #

1. 调整Shell结构，仅保留根页面为ShellContent #

修改AppShell.xaml，移除PageOnePage和PageTwoPage的ShellContent配置，只保留Login和Main作为根导航项：

<ShellContent
    Shell.NavBarIsVisible="true"
    Title="Login"
    ContentTemplate="{DataTemplate local:LoginPage}"
    Route="LoginPage" />

<ShellContent
    Shell.NavBarIsVisible="true"
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" />

2. 注册子路由 #

在AppShell.xaml.cs中，将PageOne和PageTwo注册为MainPage的子路由：

// 根路由注册
Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
Routing.RegisterRoute(nameof(MainPage), typeof(MainPage));

// 子路由注册，关联到MainPage
Routing.RegisterRoute($"{nameof(MainPage)}/{nameof(PageOnePage)}", typeof(PageOnePage));
Routing.RegisterRoute($"{nameof(MainPage)}/{nameof(PageTwoPage)}", typeof(PageTwoPage));

3. 使用相对路由导航 #

从MainPage内部导航到PageTwo时，使用相对路由：

await Shell.Current.GoToAsync(nameof(PageTwoPage));

这样PageTwo会被加入MainPage的导航栈，顶部导航栏会显示返回按钮，点击即可回到MainPage。

4. 调整页面服务注册（可选但推荐） #

页面使用Singleton注册可能导致实例复用问题（比如栈导航时多次使用同一个页面实例），建议改为Transient：

services.AddTransient<PageOnePage>();
services.AddTransient<PageOneViewModel>();

services.AddTransient<PageTwoPage>();
services.AddTransient<PageTwoViewModel>();

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