Blazor内外部导航拦截：内部导航默认确认弹窗失效问题

核心问题原因 #

你在调用浏览器原生确认弹窗时写错了函数名：浏览器原生确认弹窗的全局函数是window.confirm（小写开头），但你的代码中写的是"Confirm"（大写开头），导致调用了一个不存在的全局函数，自然无法触发弹窗。外部导航正常是因为ConfirmExternalNavigation是Blazor内部直接绑定浏览器beforeunload事件的机制，不需要你手动调用JS函数，因此不受这个错误影响。

修复步骤 #

直接修正JS调用的函数名即可：

private async Task BeforeInternalNavigation(LocationChangingContext context)
{
    if (changed)
    {
        // 修正函数名为小写的confirm，对应浏览器原生API
        var proceed = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to continue?");
        if (!proceed)
            context.PreventNavigation();
    }
}

额外说明 #

修正后，内部导航时会唤起和外部导航完全一致的原生系统确认弹窗，符合你的需求。需要注意：浏览器的confirm属于阻塞式API，必须在用户主动触发的同步调用栈中执行（比如点击链接、按钮的事件流中），而内部导航的OnBeforeInternalNavigation事件正好处于这个合法上下文，因此弹窗会正常触发，不会被浏览器安全策略拦截。

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