MAUI Shell：如何为带不同参数的同一页面类配置路由

在MAUI中复用单个页面类实现底部导航栏，核心思路是给同一AnimalPage注册多个路由（或带参数的动态路由），再将底部Tab与这些路由绑定，同时在页面内根据路由标识加载对应数据。以下是具体实现步骤：

1. 注册多路由指向同一页面 #

在App.xaml.cs的OnStart方法或AppShell的构造函数中，给AnimalPage注册多个不同名称的路由，每个路由对应一种动物类型：

// 注册多个路由，均指向AnimalPage
Routing.RegisterRoute("dogs", typeof(AnimalPage));
Routing.RegisterRoute("cats", typeof(AnimalPage));
Routing.RegisterRoute("elephants", typeof(AnimalPage));

或者使用更简洁的带参数动态路由：

// 带参数的路由，{animalType}为类型占位符
Routing.RegisterRoute("animals/{animalType}", typeof(AnimalPage));

2. 配置底部TabBar（AppShell.xaml） #

在AppShell中定义底部导航栏，每个Tab对应一个已注册的路由，设置不同的标题和图标：

方式一：多路由配置 #

<TabBar>
    <Tab Title="狗狗" Icon="dog_icon.png">
        <ShellContent Route="dogs" />
    </Tab>
    <Tab Title="猫咪" Icon="cat_icon.png">
        <ShellContent Route="cats" />
    </Tab>
    <Tab Title="大象" Icon="elephant_icon.png">
        <ShellContent Route="elephants" />
    </Tab>
</TabBar>

方式二：动态参数路由配置 #

<TabBar>
    <Tab Title="狗狗" Icon="dog_icon.png">
        <ShellContent Route="animals/dogs" />
    </Tab>
    <Tab Title="猫咪" Icon="cat_icon.png">
        <ShellContent Route="animals/cats" />
    </Tab>
    <Tab Title="大象" Icon="elephant_icon.png">
        <ShellContent Route="animals/elephants" />
    </Tab>
</TabBar>

3. 在AnimalPage中获取路由标识并加载对应数据 #

在AnimalPage的OnNavigatedTo方法中，根据当前路由信息判断要显示的动物类型，然后加载对应数据：

对应多路由的情况 #

protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);
    
    // 获取当前路由路径
    var currentRoute = Shell.Current.CurrentState.Location.OriginalString;
    
    // 根据路由判断动物类型
    string animalType = currentRoute switch
    {
        "/dogs" => "Dog",
        "/cats" => "Cat",
        "/elephants" => "Elephant",
        _ => "Unknown"
    };
    
    // 加载对应类型的动物数据
    LoadAnimalData(animalType);
}

private void LoadAnimalData(string type)
{
    // 这里实现数据加载逻辑，比如绑定到列表控件
    AnimalListView.ItemsSource = GetAnimalsByType(type);
}

对应动态参数路由的情况 #

protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);
    
    // 从路由参数中获取动物类型
    if (Shell.Current.CurrentState.Parameters.TryGetValue("animalType", out object typeObj) && typeObj is string animalType)
    {
        // 加载对应数据
        LoadAnimalData(animalType);
    }
}

4. 关键注意事项 #

• 切换底部Tab时，OnNavigatedTo会被触发，确保每次切换都重新加载对应数据，避免页面内容不更新。
• 如果需要保留每个Tab的页面状态，可以在页面内维护不同类型的状态缓存，或使用ShellContent的ContentTemplate实现独立实例。
• 图标资源需提前放入项目Resources/Images目录，并在csproj中设置为MauiImage类型。

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