Blazor路由与页面导航开发介绍

Blazor 是一个使用 C# 和 .NET 进行 Web 开发的框架，它可以在浏览器中运行，也可以在服务器上运行。在 Blazor 中，路由和页面导航是非常重要的概念，本攻略将介绍 Blazor 中的路由和页面导航开发。

Blazor 路由

Blazor 路由是指将 URL 映射到 Blazor 组件的过程。在 Blazor 中，可以使用 @page 指令来定义路由。例如：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在上面的代码中，我们使用 @page 指令定义了 /counter 路由，并在组件中实现了一个计数器。

Blazor 页面导航

Blazor 页面导航是指在 Blazor 应用程序中导航到不同页面的过程。在 Blazor 中，可以使用 NavigationManager 类来实现页面导航。例如：

@page "/"

<h1>Home</h1>

<p>
    <button class="btn btn-primary" @onclick="GoToCounter">Go to counter</button>
</p>

@code {
    [Inject]
    private NavigationManager NavigationManager { get; set; }

    private void GoToCounter()
    {
        NavigationManager.NavigateTo("/counter");
    }
}

在上面的代码中，我们使用 NavigationManager 类实现了从主页导航到计数器页面的功能。

示例说明

以下是两个示例，演示如何在 Blazor 中使用路由和页面导航。

示例1：在 Blazor 中使用路由

以下是在 Blazor 中使用路由的步骤：

1. 创建一个名为 Counter.razor 的组件。

可以使用以下代码创建一个名为 Counter.razor 的组件：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在上面的代码中，我们使用 @page 指令定义了 /counter 路由，并在组件中实现了一个计数器。

1. 在 App.razor 中添加路由。

可以使用以下代码在 App.razor 中添加路由：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

在上面的代码中，我们使用 Router 组件添加了路由，并指定了默认布局。

示例2：在 Blazor 中使用页面导航

以下是在 Blazor 中使用页面导航的步骤：

1. 创建一个名为 Counter.razor 的组件。

可以使用以下代码创建一个名为 Counter.razor 的组件：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在上面的代码中，我们使用 @page 指令定义了 /counter 路由，并在组件中实现了一个计数器。

1. 在 MainLayout.razor 中添加导航菜单。

可以使用以下代码在 MainLayout.razor 中添加导航菜单：

<div class="top-row px-4">
    <a href="/" class="navbar-brand">BlazorApp</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
    </ul>
</div>

<div class="content px-4">
    @Body
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

在上面的代码中，我们在 MainLayout.razor 中添加了导航菜单，并使用 NavLink 组件实现了页面导航。

结论

本攻略介绍了 Blazor 中的路由和页面导航开发，并提供了两个示例说明。我们提供了详细的步骤和示例说明，以帮助您快速了解和使用这些方法。