.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
相关产品推荐
相关产品推荐

