咸阳网站建设学校_中国建筑官网测评_网站seo软件_网络公关公司收费

组件主要用于锁定导航，在当前页面导航到内部目标 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();// }}
}