Blazor WASM动态设置NavLink href及页面跳转确认无响应问题

一、动态设置NavLink href完全支持 #

你可以直接通过绑定变量的方式动态设置NavLink的href属性，示例如下：

<NavLink href="@TargetRoute">跳转到目标页面</NavLink>

@code {
    // 动态更新该变量即可修改NavLink的跳转地址
    private string TargetRoute { get; set; } = "/initial-page";
}

当TargetRoute的值变更时，Blazor会自动更新NavLink的href属性，无需额外操作。

二、NavigationLock确认后跳转无响应的解决方案 #

问题核心在于NavigationLock的拦截逻辑处理不当，导致确认跳转后没有正确触发导航动作。以下是标准的修复实现：

完整代码示例 #

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<NavigationLock OnBeforeInternalNavigation="HandleNavigationAttempt" />

<!-- 数据录入表单示例 -->
<input @bind="FormModel.Username" placeholder="用户名" />
<NavLink href="@TargetRoute">通过NavLink跳转</NavLink>
<button @onclick="() => NavManager.NavigateTo(TargetRoute)">手动触发跳转</button>

@code {
    private FormData FormModel { get; set; } = new();
    private string TargetRoute { get; set; } = "/dashboard";
    private bool _navigationConfirmed;
    private string _pendingTargetUrl;

    // 拦截导航事件
    private void HandleNavigationAttempt(LocationChangingContext context)
    {
        // 检测是否存在未保存变更且未确认跳转
        if (HasUnsavedChanges() && !_navigationConfirmed)
        {
            _pendingTargetUrl = context.TargetLocation;
            context.PreventNavigation(); // 阻止默认导航
            _ = ShowConfirmationDialog(); // 异步弹出确认弹窗
        }
        else
        {
            // 重置状态，避免影响后续导航
            _navigationConfirmed = false;
            _pendingTargetUrl = null;
        }
    }

    // 自定义未保存变更检测逻辑
    private bool HasUnsavedChanges()
    {
        // 示例：判断表单是否有输入内容
        return !string.IsNullOrEmpty(FormModel.Username);
    }

    // 弹出确认弹窗并处理结果
    private async Task ShowConfirmationDialog()
    {
        bool userConfirmed = await JSRuntime.InvokeAsync<bool>(
            "confirm", 
            "存在未保存的变更，确定要离开当前页面吗？"
        );

        if (userConfirmed)
        {
            _navigationConfirmed = true;
            // 手动触发导航到之前拦截的目标地址
            NavManager.NavigateTo(_pendingTargetUrl);
        }
    }

    // 表单数据模型
    private class FormData
    {
        public string Username { get; set; }
    }
}

关键修复点 #

1. 保存目标地址：在拦截导航时，先将context.TargetLocation保存到变量中，避免弹窗结束后上下文失效
2. 异步弹窗处理：使用async Task而非async void处理弹窗逻辑，避免线程状态异常
3. 重置确认状态：每次导航完成后重置_navigationConfirmed，确保后续导航能正常触发拦截逻辑

三、常见排查点 #

• 检查HasUnsavedChanges逻辑是否存在误判，导致不必要的拦截
• 确认_navigationConfirmed状态在跳转后已重置，避免后续导航被直接放行
• 手动调用NavigateTo时，确保目标地址格式正确（如开头的/）

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