如何保持ASP.NET Blazor WebAssembly客户端页面存活，返回时避免重载？

首先明确：不能把页面组件设为单例。Blazor的路由页面默认是瞬态实例，强行改为单例会导致多个路由场景下组件实例共享，引发状态混乱、路由冲突等问题，属于反模式，完全不可取。

业界通用的解决方案主要有以下几种：

1. 基于单例/Scoped状态服务存储页面状态 #

这是最常用、最稳妥的方案，核心是把页面需要保留的状态（数据、筛选条件、分页信息、滚动位置等）抽离到独立的状态服务中，而非依赖页面组件本身。

• 实现步骤：
  • 创建一个Scoped生命周期的状态服务（比如PageAStateService），定义属性存储页面A的列表数据、当前页码、滚动位置等状态。
  • 在页面A的OnInitializedAsync方法中，优先从状态服务读取缓存数据：如果存在缓存，直接绑定到页面；如果没有，再从服务器获取数据并同步到状态服务。
  • 在页面即将卸载（比如通过NavigationManager的导航回调、组件的OnDisposing方法）时，将当前页面的状态（包括通过JS互操作获取的滚动位置）保存到状态服务中。
  • 返回页面A时，从状态服务取出滚动位置，通过JS互操作恢复页面滚动条位置。

2. 利用本地存储（LocalStorage/SessionStorage）持久化状态 #

适合需要跨浏览器会话保留状态，或不想依赖内存服务的场景。

• 实现步骤：
  • 页面离开前，将状态数据序列化为JSON字符串，存入LocalStorage（持久化）或SessionStorage（会话级）。
  • 返回页面时，从存储中读取JSON并反序列化为状态对象，恢复页面数据和筛选条件。
  • 同样通过JS互操作读取和设置滚动位置，存入存储并恢复。
  • 注意：敏感数据禁止存入LocalStorage，必要时需加密处理。

3. 自定义KeepAlive组件保留组件实例 #

通过让页面组件在导航后不被销毁，仅隐藏起来，返回时直接显示，从而保留完整状态。

• 实现思路：
  • 自定义一个KeepAlive容器组件，包裹需要保留状态的页面。当导航离开时，将组件标记为隐藏而非销毁；导航返回时，重新显示组件。
  • 可以借助Blazor的ComponentBase生命周期方法和路由事件实现，也可以使用成熟的第三方KeepAlive组件库。
  • 注意：这种方式会持续占用内存，适合页面数量少、状态复杂且频繁切换的场景，需注意内存泄漏风险。

总结 #

业界最主流的方案是基于Scoped状态服务的状态管理，它兼顾灵活性、可控性和内存效率；将页面设为单例的方案完全不可行，会引发严重的路由和状态问题。

内容的提问来源于stack exchange，提问作者Gilles jr Bisson