Blazor布局是继承LayoutComponentBase的UI复用组件，核心为@Body占位与@layout指定；可单页设置、全局默认或禁用；支持嵌套布局实现多级结构。
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 的页面都会自动套用它。
雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
0
有些页面不需要公共导航或页脚，比如登录页、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 提出来，靠继承和占位实现复用——改一处，全站同步更新。
以上就是Blazor 布局(Layout)怎么使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
919
收藏
