Blazor 布局(Layout)怎么使用

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

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

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

示例：

@inherits LayoutComponentBase

  我的顶部导航
  @Body
  © @DateTime.Now.Year

有两种方式，按需选择：

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

有些页面不需要公共导航或页脚，比如登录页、404 页。有俩办法：

在页面顶部写 @layout null，直接禁用布局
在 App.razor 里用条件逻辑控制：@if (routeData.PageType != typeof(Pages.Login)) { } else { }

如果某类页面还要再套一层专属结构（比如后台管理页带侧边菜单），可以嵌套：

本质上就是“布局套布局”，层级清晰，不冲突。

基本上就这些。布局不是魔法，就是把重复 HTML 提出来，靠继承和占位实现复用——改一处，全站同步更新。

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。