点击浏览器刷新按钮时如何触发调用Blazor组件的对应方法

问题根因 #

浏览器点击刷新会触发Blazor应用的完整冷启动，单个页面组件的生命周期没触发，常见原因是开启了服务端预渲染、路由初始化顺序问题，或是方法逻辑依赖仅客户端存在的上下文。

可用解决方案 #

方案1：根组件全局触发（所有页面加载都生效）

App.razor是Blazor应用的根组件，任何场景的应用启动（包括浏览器刷新）都会触发它的生命周期，你可以把逻辑写在这里，需要对应特定页面的话可以配合路由判断：

@inject NavigationManager NavManager
@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // 该分支每次应用启动（含刷新）都会执行
            // 示例：仅目标路由下执行对应方法
            if (NavManager.Uri.EndsWith("/你的目标页面路由"))
            {
                你要调用的指定方法();
            }
        }
    }
}

方案2：页面组件内监听路由（仅特定页面生效）

如果只需要某个页面加载（包括刷新后进入该页面）时触发逻辑，可以在页面组件内注册NavigationManager.LocationChanged事件，注意用完要释放事件避免内存泄漏：

@inject NavigationManager NavManager
@implements IAsyncDisposable

@code {
    protected override void OnInitialized()
    {
        NavManager.LocationChanged += OnLocationChanged;
        // 首次进入页面直接执行一次
        你要调用的指定方法();
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        if (e.Location.EndsWith("/你的目标页面路由"))
        {
            你要调用的指定方法();
        }
    }

    public async ValueTask DisposeAsync()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

常见踩坑说明 #

• Blazor Server项目如果开启了预渲染，OnInitialized、OnParametersSet会先在服务端预渲染阶段执行一次，该阶段没有客户端上下文，如果你方法里包含JS互操作、浏览器存储调用等逻辑会执行失败，看起来就像没触发，这种情况要把逻辑放到OnAfterRenderAsync且firstRender为true的分支里执行。
• Blazor WebAssembly项目如果刷新后逻辑没触发，先检查服务端是否配置了路由回退规则，确保刷新后的请求能正确命中Blazor应用的入口index.html。

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