Blazor-Navigating 组件

介绍

Blazor 中的 Navigating 组件是路由系统的一部分，主要用于在页面导航发生但尚未完成时向用户提供视觉反馈（如加载提示）。它封装在 Router 组件内部，是增强用户体验的关键工具。
Navigating组件，其功能是当 Blazor 应用程序在切换页面时的中间等待界面，可能由于网络缓慢，或其他原因导致。

核心用途

显示导航状态

当用户触发页面跳转（点击链接、代码调用 NavigationManager.NavigateTo）时，若目标页面需要异步加载（如下载程序集、初始化数据），Navigating 组件会立即显示预设内容（如加载动画），避免界面“卡顿”的错觉。

提升用户体验

在导航延迟期间（如网络请求慢），通过提示告知用户操作正在处理，减少重复点击或误操作。

使用场景

1. 异步加载页面

场景：首次访问某个页面时，需从服务器下载 .dll 程序集。
解决方案：Navigating 显示加载动画，直到程序集下载完成。

2. 数据初始化耗时

场景：目标页面的 OnInitializedAsync() 方法需调用 API 获取数据。
解决方案：导航期间显示占位内容，避免空白页面。

实例实现

在App.razor中设置跳转等待过程中的界面，我们做一个延时的界面看看实际的效果
在 Blazor Web App 任何呈现模式的每页/组件交互位置的项目中，Navigating 组件是无效的。

<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);
    }
}

运行结果

往期推荐

以下的文章和本文章也有着关联性，欢迎大家阅读
Blazor-全局路由跳转事件