Blazor-Navigating 组件

原创

已于 2025-07-24 13:22:57 修改 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Blazor #c# #.net

于 2025-03-25 17:15:45 首次发布

介绍

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=