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

Blazor 路由通过 @page 指令注册页面、NavigationManager 实现跳转与参数处理，支持路径参数绑定、查询字符串解析、地址监听及手动权限拦截。

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() 或延迟执行确保安全。

标签： html js 浏览器 app ai 路由 win microsoft 字符串解析 gate