You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET 8 Blazor WebAssembly渲染模式工作异常,页面导航卡顿问题求助

.NET 8 Blazor WebAssembly渲染模式工作异常,页面导航卡顿问题求助

各位开发者朋友好!我最近在做.NET 8的Blazor WebAssembly项目时遇到了一个导航卡顿的问题,折腾好久都没解决,特意来求助大家!

问题场景

我在首页点击“Se connecter”(登录按钮)的时候,页面并没有立刻跳转到/SignIn登录页,而是卡在首页,后台偷偷执行SignIn页面的OnInitializedAsync方法(里面有3秒的Sleep模拟耗时操作),等这个方法完全执行完后,才会显示登录页。我本来以为设置prerender: false能解决这个预渲染导致的卡顿问题,但试了之后完全没效果。

相关代码片段

SignIn组件页面

@page "/SignIn"

@inject INotificationService _localStorage
@inject NavigationManager _navigationManager
@inject IAuthenticationService _authService

@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

<Notification Notif="@Notification" />

<EditForm Model="SignInRequest" OnValidSubmit="SignInAction" FormName="SignInUser">
    <!-- 表单内容省略 -->
</EditForm>

@code {
    public bool PageLoading { get; set; }
    private Models.Notification? Notification { get; set; } = null;
    public SignInRequestDto SignInRequest { get; set; } = new();
    public bool IsAuthFailed { get; set; }
    public string ReturnURL { get; set; }
    public string Error { get; set; }

    protected override async Task OnInitializedAsync()
    {
        PageLoading = true;
        StateHasChanged();
        System.Threading.Thread.Sleep(3000); // 模拟耗时操作
        await GetNotification();
        PageLoading = false;
    }

    // 其他方法省略
}

MainLayout布局组件(负责导航跳转)

@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity?.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogOut">Se déconnecter</button>
    </Authorized>
    <NotAuthorized>
        <a href="@Routes.SignIn">Se connecter</a>
    </NotAuthorized>
</AuthorizeView>

@code{
    public void BeginLogOut()
    {
        Navigation.NavigateToLogout(Routes.Disconnect);
    }
}

预期与实际表现

  • 预期:点击登录链接后,立刻跳转到/SignIn页面,同时显示页面的Loading组件,不用在首页等待耗时操作完成。
  • 实际:停在首页等待3秒(OnInitializedAsync里的Sleep时间),之后才会切换到登录页。

补充说明

我原本认为设置InteractiveWebAssemblyRenderMode(prerender: false)会阻止预渲染,让目标页面直接加载,但实际完全没起作用,还是会卡在原页面等待目标组件的初始化逻辑执行完毕。

备注:内容来源于stack exchange,提问作者mathdxdx

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.20 07:58:11