Blazor-Navigating组件

原创已于 2025-07-31 13:17:06 修改 · 355 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Blazor #.net #c#

于 2025-03-04 17:54:54 首次发布

Blazor 专栏收录该内容

38 篇文章

订阅专栏

核心机制

Navigating组件是Blazor路由系统（Router组件）的内置子容器，仅在全局路由层有效（如App.razor），用于在异步导航过程中显示过渡界面。其工作原理依赖OnNavigateAsync事件的延迟触发，当存在异步操作（如数据加载）时自动显示内容。
Navigating组件，功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。
在 Blazor Web App 任何呈现模式的每页/组件交互位置的项目中，Navigating 组件是无效的。

基础用法

在App.razor中设置跳转等待过程中的界面，我们做一个延时的界面看看实际的效果，这里我们主要演示一个静态等待的效果

代码示例

<Router AppAssembly="@typeof(App).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
        <NotFound>
          <PageTitle>Not found</PageTitle>
          <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
          </LayoutView>
        </NotFound>
        <Navigating>
          <h1>等待跳转中......</h1>
        </Navigating>
</Router>

<Navigating>
    <h1>等待跳转中......</h1>
</Navigating>

在这里我只是添加了等待跳转的文字，在实际场景中大家可以添加进度条，加载提示等来提高用户体验
我们添加了一个跳转的延时操作

<Router AppAssembly="@typeof(App).Assembly" OnNavigateAsync="Callback">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
    <Navigating>
        <h1>等待跳转中......</h1>
    </Navigating>
</Router>
@code {
    private async Task Callback(NavigationContext obj)
    {
        await Task.Delay(3000);
    }
}