ASP.NET Core Blazor 路由配置和导航

大家好，我是码农刚子。本文系统介绍了Blazor单页应用的路由机制。主要内容包括：1）基础路由配置，通过@page指令定义URL映射；2）路由参数处理，支持参数约束、可选参数和通配符捕获；3）编程式导航实现，利用NavigationManager进行页面跳转和参数传递；4）高级功能如路由事件监听和嵌套路由布局。文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式，完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。

1、什么是 Blazor 路由？

Blazor 路由是一个将 URL 映射到特定组件的系统，允许构建单页应用（SPA）而无需页面刷新。

核心组件

Router 组件：管理路由匹配和导航
Route 属性：定义组件与URL的映射关系
NavigationManager：提供编程式导航能力

2、基础路由配置

1. 应用级路由设置

一般在app.razor文件可以看到路由视图的定义，这个称之为路由模板，当找到相匹配的视图时，会在<Found></Found>节点里面渲染出来，如果没有的话会在<NotFound></NotFound>节点里面渲染，当然你也可以自定义一个404的页面。里面的DefaultLayout表示默认布局组件，Layout表示指定的布局组件，这些在前面的布局里面讲到过。

2. 页面路由定义

在Blazor中使用 @page "url路径" 来表示路由地址，比如/home，那么该页面的请求地址就是域名:端口号/home；

一个组件也可以设置多个路由访问。

复制代码

<!-- Pages/Index.razor -->
@page "/"
@page "/home"

<h1>欢迎来到首页</h1>
<p>当前时间: @DateTime.Now</p>

@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("首页初始化完成");
    }
}

3、路由参数

1. 基本路由参数

设置路由参数只需要两步就可以设置路由参数

1，在@page 后面的url中使用{路由参数名}的占位符格式标明

2，在@code里面申名一个带有[Parameter]特性的属性，这里是不分大小写的，userName也可以获取到

复制代码

<!-- Pages/UserProfile.razor -->
@page "/user/{UserName}"

<h1>用户资料</h1>
<p>用户ID: @UserName</p>

@code {
    [Parameter]
    public string UserName { get; set; }

    protected override void OnParametersSet()
    {
        // 参数变化时执行
        Console.WriteLine($"加载用户 {UserName} 的资料");
    }
}

http://localhost:端口/user/码农刚子

2. 路由约束

{路有参数名:参数类型} 表示路由约束，可以限定参数的类型，当参数类型不匹配时,就会跳到错误页面

复制代码

<!-- Pages/Product.razor -->
@page "/product/{Id:int}"

<h1>产品页面</h1>


@if (Id > 0)
{
    <p>产品ID: @Id</p>
}

@code {

    [Parameter]
    public int Id { get; set; }
}

http://localhost:端口/product/100

http://localhost:端口/product/100b

约束可用参数类型表：

|------------|-----------------------|---------------------------------------------------------------------------------|-------------|
| 约束 | 示例 | 匹配项示例 | 固定条件区域性匹配 |
| bool | {active:bool} | true、FALSE | 否 |
| datetime | {dob:datetime} | 2016-12-31、2016-12-31 7:32pm | 是 |
| decimal | {price:decimal} | 49.99、-1,000.01 | 是 |
| double | {weight:double} | 1.234、-1,001.01e8 | 是 |
| float | {weight:float} | 1.234、-1,001.01e8 | 是 |
| guid | {id:guid} | 00001111-aaaa-2222-bbbb-3333cccc4444、{00001111-aaaa-2222-bbbb-3333cccc4444} | 否 |
| int | {id:int} | 123456789、-123456789 | 是 |
| long | {ticks:long} | 123456789、-123456789 | 是 |
| nonfile | {parameter:nonfile} | 不是 BlazorSample.styles.css ，不是 favicon.ico | 是 |

3. 可选参数

复制代码

<!-- Pages/Product.razor -->
@page "/product/{Id:int}"
@page "/product/{Category}/{Id:int}"

<h1>产品页面</h1>

@if (string.IsNullOrEmpty(Category))
{
    <p>所有产品</p>
}
else
{
    <p>分类: @Category</p>
}

@if (Id > 0)
{
    <p>产品ID: @Id</p>
}

@code {
    [Parameter]
    public string? Category { get; set; }

    [Parameter]
    public int Id { get; set; }
}

4. 捕获所有路由

复制代码

<!-- Pages/CatchAll.razor -->
@page "/docs/{*path}"

<h1>文档查看器</h1>
<p>请求的路径: @Path</p>

@code {
    [Parameter]
    public string? Path { get; set; }
}

4、编程式导航

1. 使用 NavigationManager

复制代码

<!-- Pages/NavigationDemo.razor -->
@page "/navigation"
@inject NavigationManager Navigation

<h1>导航演示</h1>

<button @onclick="GoToHome" class="btn btn-primary">返回首页</button>
<button @onclick="GoToUserProfile" class="btn btn-secondary">查看用户资料</button>
<button @onclick="GoBack" class="btn btn-outline">返回上一页</button>
<button @onclick="OpenExternal" class="btn btn-info">打开外部链接</button>

@code {
    private void GoToHome()
    {
        Navigation.NavigateTo("/");
    }

    private void GoToUserProfile()
    {
        Navigation.NavigateTo("/user/123");
    }

    private void GoBack()
    {
        Navigation.NavigateTo("/previous-page");
    }

    private void OpenExternal()
    {
        Navigation.NavigateTo("https://www.hwtx.top", forceLoad: true);
    }
}

2. 带查询参数的导航

复制代码

<!-- Pages/Search.razor -->
@page "/search"
@inject NavigationManager Navigation

<h1>搜索页面</h1>

<input @bind="searchTerm" placeholder="输入搜索关键词" />
<button @onclick="PerformSearch" class="btn btn-primary">搜索</button>

@if (!string.IsNullOrEmpty(SearchTerm))
{
    <p>搜索关键词: @SearchTerm</p>
}

@code {
    private string searchTerm = string.Empty;

    [Parameter]
    [SupplyParameterFromQuery(Name = "q")]
    public string? SearchTerm { get; set; }

    protected override void OnParametersSet()
    {
        if (!string.IsNullOrEmpty(SearchTerm))
        {
            searchTerm = SearchTerm;
        }
    }

    private void PerformSearch()
    {
        var query = System.Web.HttpUtility.ParseQueryString(string.Empty);
        query["q"] = searchTerm;
        
        Navigation.NavigateTo($"/search?{query}");
    }
}

5、高级路由功能

1. 路由事件处理

复制代码

<!-- Pages/RouteAwareComponent.razor -->
@page "/aware"
@inject NavigationManager Navigation
@implements IDisposable

<h1>路由感知组件</h1>
<p>位置变化次数: @locationChangeCount</p>

@code {
    private int locationChangeCount = 0;

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        locationChangeCount++;
        Console.WriteLine($"位置变化: {e.Location}");
        StateHasChanged(); // 通知组件重新渲染
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= OnLocationChanged;
    }
}

6、布局和嵌套路由

1. 多布局系统

复制代码

<!-- Pages/Dashboard.razor -->
@page "/dashboard"
@layout MainLayout

<h1>仪表板</h1>


@inherits LayoutComponentBase

<div class="admin-layout">
    <nav class="sidebar">
        <h3>管理菜单</h3>
        <NavLink href="/dashboard" Match="NavLinkMatch.All">仪表板</NavLink>
        <NavLink href="/users">用户管理</NavLink>
        <NavLink href="/settings">系统设置</NavLink>
    </nav>

    <main class="main-content">
        @Body
    </main>
</div>

2. 嵌套路由配置

复制代码

<!-- Pages/Admin.razor -->
@page "/admin/*"

<h1>管理控制台</h1>

<nav>
    <NavLink href="/admin/dashboard">仪表板</NavLink>
    <NavLink href="/admin/users">用户</NavLink>
    <NavLink href="/admin/settings">设置</NavLink>
</nav>

<div class="admin-content">
    <!-- 嵌套路由内容 -->
</div>

7、完整示例应用

1. 主布局和导航

2. 导航菜单

3. 用户管理页面

复制代码

<!-- Pages/UserManagement.razor -->
@page "/users"
@page "/users/{Action:string}/{Id:int}"

<h1>用户管理</h1>

@if (Action == "edit" && Id > 0)
{
    <UserEditor UserId="@Id" />
}
else if (Action == "create")
{
    <UserCreator />
}
else
{
    <UserList />
}

@code {
    [Parameter]
    public string? Action { get; set; }

    [Parameter]
    public int Id { get; set; }
}

<h3>编辑用户</h3>
<p>用户ID: @UserId</p>
@code {

	[Parameter]
	public int UserId
	{
		get; set;
	}
}

<h3>添加用户</h3>

@code {

}

<h3>用户列表</h3>

@code {

}

以上就是《ASP.NET Core Blazor 路由配置和导航》的所有内容，感谢你的阅读，希望对你有所收获。如果可用的话，给我点个赞👍吧。