Blazor-Navigating组件

MaybeHC

发布于 2025-03-05 08:27:02

5800

代码可运行

文章被收录于专栏：技术之路技术之路

运行总次数：0

代码可运行

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