Blazor 布局（Layout）本质是复用 UI 结构的组件，核心就两点：定义一个继承 LayoutComponentBase 的组件，在里面放 @Body 占位；然后让页面“认它当母版页”——要么单页指定，要么全局统一。
怎么写一个布局组件
在 Shared 文件夹里新建
MainLayout.razor（推荐位置），内容类似这样： 开头必须写
@inherits LayoutComponentBase用
@Body标记子页面内容插入的位置 可以像普通组件一样用
@code、数据绑定、注入服务 配套样式自动匹配同名文件
MainLayout.razor.css（CSS 隔离生效）
示例：
@inherits LayoutComponentBase <div class="app-layout"> <header>我的顶部导航</header> <main class="content">@Body</main> <footer>© @DateTime.Now.Year</footer> </div>
怎么让页面用上这个布局
有两种方式，按需选择：
单页指定：在某个.razor页面顶部加一行
@layout MainLayout全局默认：打开
App.razor，把
<routeview></routeview>改成
<routeview routedata="@routeData" defaultlayout="typeof(MainLayout)"></routeview>
一旦设了全局默认，所有没显式声明
@layout的页面都会自动套用它。
怎么跳过布局（比如登录页）
有些页面不需要公共导航或页脚，比如登录页、404 页。有俩办法：
在页面顶部写@layout null，直接禁用布局 在
App.razor里用条件逻辑控制：
@if (routeData.PageType != typeof(Pages.Login)) { <routeview ...></routeview> } else { <routeview routedata="@routeData"></routeview> }
嵌套布局怎么搞
如果某类页面还要再套一层专属结构（比如后台管理页带侧边菜单），可以嵌套：
新建子布局（如AdminLayout.razor），同样
@inherits LayoutComponentBase在子布局顶部加
@layout MainLayout，表示它自己也用主布局包装 子页面引用
@layout AdminLayout，就能同时获得两级结构
本质上就是“布局套布局”，层级清晰，不冲突。
基本上就这些。布局不是魔法，就是把重复 HTML 提出来，靠继承和占位实现复用——改一处，全站同步更新。
