Maui Blazor移动端应用返回时不重渲染父页面的实现方法

一、通过DI控制组件生命周期 #

Blazor组件默认是瞬态实例，但可以通过依赖注入注册指定生命周期，实现类似原生MAUI的状态保留效果：

• 列表页注册为Singleton：在MauiProgram.cs中把列表页组件注册为单例，确保组件实例唯一，状态（滚动位置、已加载数据）不会被销毁：

  builder.Services.AddSingleton<ListPage>();
  

  路由导航时会复用该单例实例，返回时直接恢复原有状态。注意要避免组件持有上下文相关的资源，防止内存泄漏。
• 详情页保持Transient：Blazor组件默认就是瞬态，无需额外注册，每次导航都会创建新实例，避免状态污染。

二、手动保存/恢复页面状态 #

如果不想依赖DI生命周期控制，可通过导航事件结合本地存储实现状态持久化：

• 保存状态：在列表页导航离开时，用JSInterop获取滚动位置，将状态存入Preferences或内存缓存：

  protected override async void OnNavigatedFrom(NavigationEventArgs args)
  {
      var scrollPosition = await JSRuntime.InvokeAsync<int>("getElementScrollTop", "#list-container");
      Preferences.Set("ListScrollPos", scrollPosition);
      base.OnNavigatedFrom(args);
  }
  

• 恢复状态：在列表页初始化或导航返回时，读取状态并通过JSInterop恢复滚动位置：

  protected override async Task OnNavigatedToAsync(NavigationEventArgs args)
  {
      if (Preferences.ContainsKey("ListScrollPos"))
      {
          var pos = Preferences.Get<int>("ListScrollPos", 0);
          await JSRuntime.InvokeVoidAsync("setElementScrollTop", "#list-container", pos);
      }
      base.OnNavigatedToAsync(args);
  }
  

  对应的JS方法需放在wwwroot/index.html中：

  function getElementScrollTop(selector) {
      return document.querySelector(selector).scrollTop;
  }
  function setElementScrollTop(selector, pos) {
      document.querySelector(selector).scrollTop = pos;
  }
  

三、全屏对话框替代导航 #

如果上述方案不符合需求，可采用你考虑的全屏对话框方案：

• 以全屏模态对话框的形式打开详情页，此时列表页不会被卸载，状态自然保留：

  private async Task OpenDetail(Item targetItem)
  {
      var detailView = new DetailPage(targetItem);
      await Application.Current.MainPage.ShowModalAsync(detailView);
  }
  

  关闭对话框后直接回到列表页，原有滚动位置、数据状态完全保留。这种方式更贴近原生MAUI的页面生命周期逻辑，注意Blazor组件可通过BlazorWebView嵌入原生页面实现交互。

注意事项 #

• 单例组件需避免持有过多上下文资源，防止内存泄漏；
• 用Preferences存储状态时，敏感数据建议改用安全存储；
• 全屏对话框方案中，需协调好Blazor组件与MAUI原生页面的交互逻辑。

内容的提问来源于stack exchange，提问作者Zoltán