maui mvvm 带参数跳转页面代码
时间: 2025-05-31 19:44:29 浏览: 16
### 关于 Maui MVVM 中实现带参数页面跳转
在 .NET MAUI 的 MVVM 架构中,可以通过 `Shell` 提供的导航机制来实现带参数的页面跳转。以下是具体的代码示例以及其实现方式。
#### 使用 Shell 导航服务传递参数
.NET MAUI 支持通过 URI 路径的方式定义页面之间的导航关系,并允许附加查询参数[^1]。下面是一个完整的例子:
```csharp
// MainPageViewModel.cs
public class MainPageViewModel : INotifyPropertyChanged
{
public ICommand NavigateCommand { get; }
public MainPageViewModel()
{
NavigateCommand = new Command(async () => await NavigateToDetailPage());
}
private async Task NavigateToDetailPage()
{
var parameter = "Hello from MainPage";
await Shell.Current.GoToAsync(nameof(DetailPage), true, new Dictionary<string, object>
{
["Message"] = parameter
});
}
public event PropertyChangedEventHandler PropertyChanged;
}
```
在此代码片段中,`NavigateToDetailPage` 方法展示了如何向目标页面传递名为 `Message` 的字符串参数[^2]。
#### 接收参数的目标页面 ViewModel
接收参数的页面需要在其对应的 ViewModel 中处理这些数据。以下是如何捕获并解析传入参数的例子:
```csharp
// DetailPageViewModel.cs
public class DetailPageViewModel : INotifyPropertyChanged
{
private string _message;
public string Message
{
get => _message;
set
{
if (_message != value)
{
_message = value;
OnPropertyChanged(nameof(Message));
}
}
}
public DetailPageViewModel(IDictionary<string, object> queryParameters)
{
if (queryParameters.ContainsKey("Message"))
{
Message = queryParameters["Message"].ToString();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
```
此部分实现了从导航过程中接收到的字典对象提取指定键值的功能[^3]。
#### 配置 AppShell 文件支持自定义路由
为了使上述功能正常工作,还需要配置 `AppShell.xaml` 来注册各个页面及其关联名称:
```xml
<!-- AppShell.xaml -->
<Shell ...
Route="MainPage">
<!-- Define routes here -->
<TabBar>
<ShellContent Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage"/>
<ShellContent Title="Details"
ContentTemplate="{DataTemplate local:DetailPage}"
Route="DetailPage"/>
</TabBar>
</Shell>
```
这里设置了两个主要节点——起始页 (`MainPage`) 和详情页 (`DetailPage`) 并分配了各自的路径名以便后续调用[^4]。
---
### 总结
以上展示了一个基于 .NET MAUI MVVM 模式的典型场景:利用内置壳架构完成跨视图模型间的数据共享操作。它不仅简化了传统手动管理生命周期的过程,还增强了应用程序整体结构的一致性和可维护性。
阅读全文
相关推荐


















