Blazor-NavigationLock组件

MaybeHC

发布于 2025-03-26 14:14:14

4500

代码可运行

运行总次数：0

代码可运行

组件主要用于锁定导航，在当前页面导航到内部目标 URL 之前，会执行OnBeforeInternalNavigation 事件。在 OnBeforeInternalNavigation 事件中，具有一个LocationChangingContext 类型的参数，该类型的参数与使用RegisterLocationChangingHandler()方法注册的事件处理程序中的参数类型是一样的。通过 LocationChangingContext 的 PreventNavigation()方法可以阻止导航到目标 URL，以进行一些相关的操作。在 NavigationLock 组件上还具有一个ConfirmExternalNavigation 参数，用于设置导航到目标 URL 是否弹出确认提示框。

使用方法

NavigationLock组件需要在自动呈现模式+全局交互位置才能触发

@page "/NavigationLock"

<h3>NavigationLockPage</h3>

<NavigationLock OnBeforeInternalNavigation="Callback"></NavigationLock>
@code {
    private void Callback(LocationChangingContext context)
    {
        Console.WriteLine($"目标 URL：{context.TargetLocation}");
        Console.WriteLine($"导航方式：{context.IsNavigationIntercepted}");
        Console.WriteLine($"历史记录状态：{context.HistoryEntryState}");
    }
}

直接使用该组件，进行事件绑定即可，其中的context.TargetLocation是目标URL,context.IsNavigationIntercepted是导航的方式区别于代码跳转还是链接跳转。链接导航IsNavigationIntercepted=true，代码导航IsNavigationIntercepted=false 下面我们说说使用场景

使用场景

弹出确认框

使用原生JS进行交互，JS弹出窗口

@page "/NavigationLock"
@inject IJSRuntime JSRuntime
<h3>NavigationLockPage</h3>

<NavigationLock OnBeforeInternalNavigation="Callback"></NavigationLock>
@code {
    private async Task Callback(LocationChangingContext context)
    {
        var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", "确认离开？");
        if (!isConfirmed)
        {
            context.PreventNavigation();
        }
    }
}

根据选择决定是否进行跳转

跳出外链接自动弹框

只需要在NavigationLock组件设置ConfirmExternalNavigation="true"即可，组件将自动弹出提示框

@page "/NavigationLock"
@inject IJSRuntime JSRuntime
<h3>NavigationLockPage</h3>
<a href="https://www.qq.com">外部链接</a>
<NavigationLock OnBeforeInternalNavigation="Callback"
    ConfirmExternalNavigation="true"></NavigationLock>
@code {
    private async Task Callback(LocationChangingContext context)
    {
        // var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", "确认离开？");
        // if (!isConfirmed)
        // {
        //     context.PreventNavigation();
        // }
    }
}