Blazor Server应用：如何设置脱离标准布局的全屏默认首页

这里提供两种实用方案，根据你的需求选择即可：

方案一：给首页指定独立的全屏布局 #

适合首页固定全屏，不需要动态切换的场景，实现最简单：

1. 创建全屏布局组件 FullScreenLayout.razor，里面只渲染页面主体，不带任何页眉和导航：

@Body

2. 在首页 Index.razor 顶部添加布局指定，覆盖默认的 MainLayout：

@page "/"
@layout FullScreenLayout

<!-- 这里写你的全屏首页内容 -->
<div style="width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;">
    <h1>全屏首页</h1>
</div>

其他页面无需修改，会自动沿用 MainLayout 的页眉+导航+中间区域布局。

方案二：在主布局中动态控制元素显示 #

适合需要动态切换布局（比如从首页跳转到其他页面后自动恢复标准布局）的场景：

修改 MainLayout.razor，注入 NavigationManager 监听当前路由，根据路径判断是否隐藏页眉和导航：

@inherits LayoutComponentBase
@inject NavigationManager NavManager

@* 非首页显示标准布局 *@
@if (NavManager.Path != "/")
{
    <header class="top-header">
        <!-- 你的顶部页眉内容 -->
        <h3>系统页眉</h3>
    </header>
    <div class="layout-wrapper">
        <nav class="side-nav">
            <!-- 你的左侧导航菜单 -->
            <NavLink href="/dashboard" Match="NavLinkMatch.All">仪表盘</NavLink>
            <NavLink href="/settings">设置</NavLink>
        </nav>
        <main class="content-area">
            @Body
        </main>
    </div>
}
@* 首页全屏显示 *@
else
{
    <main style="width:100%; height:100vh; margin:0;">
        @Body
    </main>
}

首页 Index.razor 无需修改布局设置，保持默认即可，主布局会自动根据当前路径切换显示模式。

内容的提问来源于stack exchange，提问作者Mdarende