Blazor 路由怎么配置

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

Blazor 路由配置核心就三件事:声明页面路由、处理嵌套结构、传递动态参数。不需要手动注册,靠编译时扫描

@page
指令自动完成。

基础页面路由声明

在任意 .razor 文件顶部用

@page
指令定义访问路径,一个组件可配多个路由:

@page "/"
对应首页,
@page "/about"
对应关于页
支持多路由:写两行
@page "/home"
@page "/"
,两者都可访问同一组件
路径区分大小写,但建议统一小写以避免混淆

嵌套路由实现父子结构

适合仪表盘、管理后台等有层级关系的场景,URL 形如

/admin/users

父组件(如
Admin.razor
)写
@page "/admin"
,内部放
<outlet></outlet>
占位子内容
子组件(如
Users.razor
)写
@page "/admin/users"
,路径必须完整包含父级前缀
无需额外配置,Blazor 自动识别嵌套关系并把子组件渲染进
<outlet></outlet>

路由参数与类型约束

用花括号传值,比如用户 ID 或产品编号:

基本用法:
@page "/user/{id}"
+
[Parameter] public string id { get; set; }
加类型约束更安全:
@page "/product/{id:int}"
,不匹配整数时直接 404,不用手动校验
支持多种类型:int、bool、datetime、guid,甚至自定义约束(需实现
IRouteConstraint

全局路由入口与容错

所有逻辑起点是

App.razor
中的
<router></router>
组件:

AppAssembly="@typeof(Program).Assembly"
告诉 Blazor 扫哪个程序集找
@page
<notfound></notfound>
区块定义 404 页面,可放链接或跳转逻辑
默认布局通过
DefaultLayout="@typeof(MainLayout)"
统一应用,个别页面可用
@layout
覆盖

基本上就这些。不复杂但容易忽略细节,比如嵌套路由没写全路径、参数名大小写不一致、或忘了在父组件加

<outlet></outlet>
—— 这些都会导致子内容不显示。

相关推荐