Blazor-全局路由跳转事件

OnNavigateAsync获取或设置导航到新页面之前应调用的处理程序,是发生在导航到目标 URL 之前触发的事件。
(1) 在浏览器的地址栏中手动输入访问页面的 URL 会触发
(2) 在应用中单击链接会触发,会触发。
(3) 使用NavigationManager.NavigateTo()方法以代码的方式访问页面会触发

Blazor 的 OnNavigateAsync 是 Router 组件提供的关键事件,用于在页面导航发生前执行异步逻辑(如权限验证、数据预加载或重定向)

触发场景

  1. 浏览器地址栏手动输入 URL
  2. 应用内点击链接(如 )
  3. 调用NavigationManager.NavigateTo() 方法

事件触发测试

在Router.razor文件中使用OnNavigateAsync事件

@inject NavigationManager navigationManager

<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }"
OnNavigateAsync="Callback">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

@code {
    private async Task Callback(NavigationContext obj)
    {
        Console.WriteLine(obj.Path);
        await Task.CompletedTask;
    }
}

链接跳转测试

在这里插入图片描述

可以正确输出,触发事件成功

代码跳转

@page "/demoPage"
@rendermode InteractiveAuto
@inject NavigationManager Navigation

<h3>DemoPage</h3>
<button @onclick="NavigateTo">代码跳转</button>

@code {
    private void NavigateTo()
    {
        Navigation.NavigateTo("/counter");
    }
}

在这里插入图片描述

点击代码跳转按钮后,控制台正常输出,触发事件成功

地址栏输入链接跳转

在这里插入图片描述

我们在地址栏输入了/demoPage进行页面跳转,触发事件成功

拦截地址重定向

@inject NavigationManager navigationManager

<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }"
OnNavigateAsync="Callback">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

@code {
    private async Task Callback(NavigationContext obj)
    {
        if (obj.Path == "counter"){
            navigationManager.NavigateTo("/weather");
        }
        Console.WriteLine(obj.Path);
        await Task.CompletedTask;
    }
}

我们做一个拦截跳转的测试,当访问counter页面时我们进行重定向,跳转至weather组件
在这里插入图片描述

我们可以看到预期和我们预想的是一致的,完成了重定向

往期关联推荐

Blazor-组件路由事件
Blazor-路由模板(上)
Blazor-路由模板(下)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code-Study

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值