Blazor 布局(Layout)怎么使用

Blazor布局是继承LayoutComponentBase的UI复用组件，核心为@Body占位与@layout指定；可单页设置、全局默认或禁用；支持嵌套布局实现多级结构。

Blazor 布局（Layout）本质是复用 UI 结构的组件，核心就两点：定义一个继承 LayoutComponentBase 的组件，在里面放 @Body 占位；然后让页面“认它当母版页”——要么单页指定，要么全局统一。

怎么写一个布局组件

在 Shared 文件夹里新建 MainLayout.razor（推荐位置），内容类似这样：

• 开头必须写 @inherits LayoutComponentBase
• 用 @Body 标记子页面内容插入的位置
• 可以像普通组件一样用 @code、数据绑定、注入服务
• 配套样式自动匹配同名文件 MainLayout.razor.css（CSS 隔离生效）

示例：

@inherits LayoutComponentBase
<p class="app-layout">
  <header>我的顶部导航</header>
  <main class="content">@Body</main>
  <footer>&copy; @DateTime.Now.Year</footer>
</p>

怎么让页面用上这个布局

有两种方式，按需选择：

• 单页指定：在某个 .razor 页面顶部加一行 @layout MainLayout
• 全局默认：打开 App.razor，把 <routeview></routeview> 改成 <routeview routedata="@routeData" defaultlayout="typeof(MainLayout)"></routeview>

一旦设了全局默认，所有没显式声明 @layout 的页面都会自动套用它。

标签： css html app ai red