Blazor 点击浏览器返回触发页面重渲染丢失滚动位置如何解决

1. 内置滚动位置恢复（.NET 6+ 推荐首选） #

无需编写额外业务代码，直接开启Blazor Router内置的滚动恢复能力即可解决位置丢失问题：

• 找到项目根目录的App.razor文件，给Router组件添加RestoreScrollPosition="true"属性：

<Router AppAssembly="@typeof(App).Assembly" RestoreScrollPosition="true">
    <!-- 原有Router内部内容保持不变 -->
</Router>

• 开启后Blazor会自动在导航离开时记录当前页面滚动位置，导航返回时自动恢复到对应位置。

2. 列表数据缓存，避免重复加载 #

仅恢复滚动位置无法解决重复渲染的闪屏问题，建议搭配缓存方案使用：

2.1 组件状态持久化 #

.NET 6+ 支持内置的组件状态持久化能力，可以缓存列表数据、页码、筛选条件等所有页面状态：

• 在App.razor的Router内部添加<PersistComponentState />组件
• 列表页注入ComponentStatePersistence服务，在OnInitializedAsync生命周期中优先读取缓存的列表数据，不存在再调用接口拉取，页面销毁时自动缓存当前状态。

2.2 存储缓存 #

• Blazor Server 场景可注入IMemoryCache，将列表查询参数作为key缓存接口返回结果，有效期可根据业务数据更新频率设置
• Blazor WASM 场景可使用SessionStorage缓存列表数据，关闭标签页自动清除不会残留冗余数据

3. 手动兼容方案（.NET 5及更早版本） #

如果使用的是不支持内置滚动恢复的旧版本.NET，可以通过JS互操作手动实现滚动位置记录与恢复：

1. 先在wwwroot的公共JS文件中添加两个全局方法：

// 获取当前滚动位置
window.getScrollY = () => window.scrollY;
// 设置滚动位置
window.setScrollY = (pos) => window.scrollTo(0, pos);

2. 列表页注入IJSRuntime服务，在跳转到详情页的点击事件中，先调用getScrollY拿到当前滚动位置，存在SessionStorage或者全局状态管理中
3. 列表页OnAfterRenderAsync生命周期中，判断如果是返回导航，读取之前存储的滚动位置，调用setScrollY恢复位置

4. 虚拟滚动场景适配 #

如果列表使用了虚拟滚动组件，记录像素位置容易出现偏移，建议改为记录当前可见区域的首个产品ID/索引，返回后直接调用虚拟滚动组件的滚动到指定项方法，定位更准确。

内容的提问来源于stack exchange，提问作者Hadi Terkawi