Blazor 共享布局 MasterPage 设置方法

来源：这里教程网时间：2026-02-21 17:33:58 作者：

Blazor 没有传统 ASP.NET Web Forms 的

MasterPage

，但它的 Layout 组件 就是等效替代方案——功能一致、更灵活，且原生支持数据绑定、依赖注入和嵌套。

创建 Layout 组件（相当于 MasterPage）

布局组件本质是一个继承

LayoutComponentBase

的 Razor 组件，必须包含

@Body

占位符：

在
Shared/
文件夹下新建
MainLayout.razor
顶部写
@inherits LayoutComponentBase
在需要显示页面内容的位置插入
@Body
可直接使用
@inject
、
@code
、
<navlink></navlink>
等所有 Blazor 功能

示例：

@inherits LayoutComponentBase
<header><h1>My App</h1></header>
<nav><NavLink href="/">Home</NavLink></nav>
@Body
<footer>&copy; @DateTime.Now.Year</footer>

在页面中应用 Layout

两种方式任选其一：

单页指定：在某个
.razor
页面顶部加
@layout MainLayout
全局默认：在
App.razor
中的
<router></router>
内设置
DefaultLayout
，所有未显式指定 layout 的页面自动使用它

注意：登录页、错误页等无需通用导航的页面，可通过

<routeview></routeview>

的条件逻辑跳过默认布局。

嵌套布局（多级 MasterPage 场景）

当不同模块（如用户管理、订单中心）需要各自侧边栏+全局页眉页脚时，就用嵌套：

子布局（如
UserLayout.razor
）也
@inherits LayoutComponentBase
，并声明
@layout MainLayout
子页面引用
UserLayout
，它会先套用
MainLayout
，再把内容渲染进
@Body
位置 层级清晰：全局布局 → 模块布局 → 页面内容