大家好，我是码农刚子。本文系统介绍了Blazor单页应用的路由机制。主要内容包括：1）基础路由配置，通过@page指令定义URL映射；2）路由参数处理，支持参数约束、可选参数和通配符捕获；3）编程式导航实现，利用NavigationManager进行页面跳转和参数传递；4）高级功能如路由事件监听和嵌套路由布局。文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式，完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。
1、什么是 Blazor 路由？
Blazor 路由是一个将 URL 映射到特定组件的系统，允许构建单页应用（SPA）而无需页面刷新。
核心组件
- Router 组件：管理路由匹配和导航
- Route 属性：定义组件与URL的映射关系
- NavigationManager：提供编程式导航能力
2、基础路由配置
1. 应用级路由设置
一般在app.razor文件可以看到路由视图的定义，这个称之为路由模板，当找到相匹配的视图时，会在节点里面渲染出来，如果没有的话会在节点里面渲染，当然你也可以自定义一个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
约束可用参数类型表：
约束 |
示例 |
匹配项示例 |
固定条件 |
|
|
|
否 |
|
|
|
是 |
|
|
|
是 |
|
|
|
是 |
|
|
|
是 |
|
|
|
否 |
|
|
|
是 |
|
|
|
是 |
|
|
不是 ，不是 |
是 |
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 路由配置和导航》的所有内容，感谢你的阅读，希望对你有所收获。如果可用的话，给我点个赞👍吧。
