Blazor 页面导航和路由设置教程

来源:这里教程网 时间:2026-02-21 17:34:09 作者:

Blazor 的页面导航和路由靠 @page 指令和内置的 NavigationManager 配合实现,不需要额外安装路由库。核心是理解组件如何被识别为可访问页面、如何跳转、以及如何处理参数和导航状态。

页面如何变成可访问的路由

在 Blazor 中,只要在 Razor 组件顶部加上 @page 指令,它就自动注册为一个路由路径:

@page "/counter" → 访问
/counter
就显示这个组件
@page "/products/{id:int}" → 支持带整数参数的路径,如
/products/123
@page "/user/{name?}"
{name?}
表示可选参数,
/user
/user/john
都匹配

所有带 @page 的组件会被 App.razor 中的

<router></router>
自动扫描并映射,无需手动配置路由表。

程序内跳转:用 NavigationManager

在组件中注入 NavigationManager,就能实现编程式导航:

Navigation.NavigateTo("/about") —— 跳转到指定路径(默认同步,不刷新页面) Navigation.NavigateTo("/home", forceLoad: true) —— 强制浏览器刷新(用于跳转到非 Blazor 管理的页面,如静态 HTML) 跳转前常需检查权限或保存状态,可在调用
NavigateTo
前加逻辑判断

注意:不要在组件首次渲染(

OnInitialized
)中直接跳转并同时修改状态,可能触发重复渲染;建议用
StateHasChanged()
或延迟执行确保安全。

获取和响应路由参数与查询字符串

路由参数自动绑定到组件的 public 属性(需匹配名称和类型),例如:

@page "/blog/{year:int}/{month:int}" 对应
public int Year { get; set; }
public int Month { get; set; }
查询字符串(如
?q=blazor&sort=date
)不会自动绑定,要用
NavigationManager.ToBaseRelativePath(Navigation.Uri)
解析 URL,再用
Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery()

监听地址栏变化?订阅

NavigationManager.LocationChanged
事件,但记得在
Dispose
中取消订阅,避免内存泄漏。

处理导航拦截和未授权跳转

Blazor 不自带守卫(Guard)机制,但可以手动实现:

在布局组件(如
MainLayout.razor
)中检查用户登录状态,用
@if (!isLoggedIn) { <navigateto></navigateto> }
对敏感页面,在
OnParametersSet
中校验权限,不满足时立即跳转:
Navigation.NavigateTo("/unauthorized", replace: true)
想阻止离开页面(如表单未保存),目前没有原生
beforeunload
集成,需用 JS 互操作调用
window.addEventListener('beforeunload', ...)

基本上就这些 —— Blazor 路由轻量直接,关键在于把 @pageNavigationManager 和生命周期配合好,不复杂但容易忽略细节。

相关推荐