Maui Blazor按钮点击调用异步API后导航页面失效问题

数据老陈

2026-4-17

嘿，我之前碰到过几乎一模一样的问题！你这个情况大概率是两个细节没处理对，咱们一步步来捋清楚：

首先，你的事件处理方法用了async void，这在Blazor里可是个隐形坑！Blazor的组件事件处理应该用async Task作为返回类型，因为async void属于“火了就忘”的模式，Blazor框架没法跟踪这个异步操作什么时候真正完成，很可能API还在调用过程中，页面就已经触发了重新渲染，直接把导航的逻辑给冲掉了。

然后就是导航时的forceLoad: true参数，这个参数会强制浏览器重新加载整个页面，而不是Blazor内部的客户端导航——这就是你看到“当前页面又 reappears”的原因：其实是页面被重载了，原本的导航逻辑被打断了。

咱们直接改代码试试：

把方法返回类型从async void改成async Task：

private async Task Method() // 这里把void换成Task
{
    SendVerificationCodeResponse response = await Post<SendVerificationCodeResponse>(url,
        new SendVerificationCodeParam { Number = number });

    if (response.IsSuccess)
    {
        // 把forceLoad改成false，或者直接省略第二个参数（默认就是false）
        navManager.NavigateTo($"/verify-code?from=signin&number={number}", false);
    }
}

另外建议给你的Post方法加个异常处理，虽然你说代码没报错，但异步方法里的异常有时候会静默失败，导致导航代码根本没机会执行。比如这样调整：

private async Task<ResponseType> Post<ResponseType>(string url, object param)
{
    try
    {
        using (var client = new HttpClient())
        {
            var serializedStr = JsonConvert.SerializeObject(param);
            var response = await client.PostAsync(url, new StringContent(serializedStr, Encoding.UTF8, "application/json"));
            
            // 加上这个，如果API返回非2xx状态码会直接抛出异常，方便排查问题
            response.EnsureSuccessStatusCode();
            
            string contentStr = await response.Content.ReadAsStringAsync();
            return JsonConvert.DeserializeObject<ResponseType>(contentStr);
        }
    }
    catch (Exception ex)
    {
        // 可以在这里打日志，或者给用户个友好提示
        Console.WriteLine($"调用API出错啦：{ex.Message}");
        return default;
    }
}

最后再确认一下你的NavigationManager是不是通过构造函数正确注入的，别是手动new的实例，那样导航肯定不会生效的。

按这几步改完，应该就能正常跳转到目标页面了！

备注：内容来源于stack exchange，提问作者Rob White