.NET 8 Blazor Web App路由时如何避免布局重载？

一、解决布局重载（导航菜单不重置）问题 #

默认情况下，Blazor Server 中使用相同布局的交互式页面切换时，布局组件不会被重建。你遇到的布局重载问题大概率是页面未启用交互式渲染模式，导致全页刷新触发布局重建。以下是修复步骤：

1. 全局启用交互式服务器渲染模式 #

修改 Routes.razor，为所有页面指定交互式渲染模式，避免全页刷新：

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" RenderMode="InteractiveServer" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

2. 确保导航菜单状态留存 #

如果你的导航菜单（NavMenu.razor）包含折叠/展开状态，将状态存储在组件实例字段中，避免每次渲染重置：

@* NavMenu.razor 示例 *@
<div class="nav-item px-3">
    <button @onclick="ToggleTreeMenu" class="nav-link">
        <span class="oi oi-folder" aria-hidden="true"></span> 菜单树
        <span>@(isTreeExpanded ? "▼" : "▶")</span>
    </button>
    @if (isTreeExpanded)
    {
        <div class="pl-4">
            <NavLink class="nav-link" href="subpage1">子页面1</NavLink>
            <NavLink class="nav-link" href="subpage2">子页面2</NavLink>
        </div>
    }
</div>

@code {
    private bool isTreeExpanded = false;

    private void ToggleTreeMenu()
    {
        isTreeExpanded = !isTreeExpanded;
    }
}

3. 验证布局是否重建 #

可以在 MainLayout.razor 中添加生命周期日志，确认布局实例是否被销毁：

@inherits LayoutComponentBase
@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("MainLayout 初始化");
        base.OnInitialized();
    }

    public override void Dispose()
    {
        Console.WriteLine("MainLayout 销毁");
        base.Dispose();
    }
}

页面切换时如果没有输出「MainLayout 销毁」，说明布局实例已成功保留。

二、实现多布局支持 #

完全支持多布局，有两种常用实现方式：

1. 页面级指定布局 #

创建新布局组件（如 AdminLayout.razor）：

@inherits LayoutComponentBase

<div class="admin-page">
    <div class="admin-sidebar">
        <AdminNavMenu />
    </div>
    <main class="admin-content">
        @Body
    </main>
</div>

在需要使用该布局的页面顶部添加 @layout 指令：

@layout Layout.AdminLayout
@rendermode InteractiveServer

<h1>管理员仪表盘</h1>

2. 路由规则批量指定布局 #

修改 Routes.razor，根据路由模板自动匹配布局：

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        @{
            // 所有 /admin/ 开头的路由使用 AdminLayout，其余使用 MainLayout
            var targetLayout = routeData.Route.RouteTemplate.StartsWith("/admin/") 
                ? typeof(Layout.AdminLayout) 
                : typeof(Layout.MainLayout);
        }
        <RouteView RouteData="routeData" DefaultLayout="@targetLayout" RenderMode="InteractiveServer" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(Layout.MainLayout)">
            <p>抱歉，该页面不存在</p>
        </LayoutView>
    </NotFound>
</Router>

关键注意事项 #

• 只有交互式渲染模式的页面才能保留布局状态，静态渲染会触发全页刷新，导致布局重建。
• 不同布局之间切换时，旧布局会被销毁、新布局会初始化，这是正常行为（布局类型不同）。
• 全局状态（如用户信息）建议使用注入服务或 PersistentComponentState 存储，不要依赖组件实例状态。

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