Blazor WebAssembly来回导航初始化及页面状态留存问题咨询

问题1：点击浏览器返回按钮后页面状态丢失 #

根本原因：Blazor WebAssembly 中默认导航离开当前页面组件时，组件实例会被销毁。当你点击浏览器返回按钮回到该页面时，框架会新建一个组件实例，因此OnInitialized生命周期方法会重新执行，原有页面状态（表单输入、滚动位置、临时数据等）全部重置。
可选解决方案如下：

• 方案1：使用全局状态容器
  注册一个作用域服务存储对应页面的状态，导航离开前将需要保留的状态写入服务，组件初始化时优先从服务中读取状态恢复，适合业务复杂、多组件共享状态的场景。
• 方案2：使用内置PersistentComponentStateAPI
  .NET 6及以上版本提供的原生持久化组件状态API，无需自行实现状态服务，示例代码如下：

[Inject] private PersistentComponentState AppState { get; set; }
private Page1State _currentState;
private PersistingComponentStateSubscription _subscription;

protected override void OnInitialized()
{
    _subscription = AppState.RegisterOnPersisting(PersistState);
    if (AppState.TryTakeFromJson<Page1State>("page1_state", out var savedState))
    {
        // 直接恢复已保存的状态
        _currentState = savedState;
        // 此处补充恢复表单值、滚动位置等业务逻辑
    }
    else
    {
        // 首次加载走正常初始化逻辑
        _currentState = new Page1State();
    }
}

// 组件销毁前触发的状态持久化逻辑
private Task PersistState()
{
    AppState.PersistAsJson("page1_state", _currentState);
    return Task.CompletedTask;
}

// 释放订阅避免内存泄漏
public void Dispose()
{
    _subscription.Dispose();
}

• 方案3：使用浏览器本地存储
  轻量场景下可以将状态存入localStorage或sessionStorage，组件初始化时读取恢复，适合需要跨会话保留状态的需求。

问题2：同路由不同参数跳转页面不刷新 #

你已通过调整代码解决该问题，此处补充核心原理与优化建议：

核心原理 #

当跳转的路由匹配到同一个组件（仅路由参数变化，如从/person/1到/person/2），Blazor不会销毁重建现有组件实例，因此仅在首次加载时执行一次的OnInitializedAsync不会重新触发，导致数据没有更新。而OnParametersSetAsync生命周期会在路由参数每次变化时触发，因此将数据加载逻辑迁移到该方法即可解决问题。

优化建议 #

可以增加参数变化校验，避免无意义的重复请求，优化后代码如下：

private int _lastPersonId;
protected override async Task OnParametersSetAsync()
{
    // 仅参数发生变化时才重新请求数据
    if (PersonId != _lastPersonId)
    {
        PersonModel = await PersonService.Get<Person>(PersonId);
        editContext = new EditContext(PersonModel);
        _lastPersonId = PersonId;
        StateHasChanged();
    }
}

内容的提问来源于stack exchange，提问作者Rui Lima