Blazor中如何修改App.razor中已设置的默认布局？

以下两种方案都无需为单独页面指定布局，直接全局生效： #

方案1：状态绑定实现（全Blazor版本通用，灵活度最高） #

第一步：创建布局状态管理类 #

用来存储当前全局布局类型，支持变更通知：

public class LayoutState
{
    private Type _currentLayout = typeof(BeforeLoginLayout);
    public Type CurrentLayout
    {
        get => _currentLayout;
        set
        {
            _currentLayout = value;
            OnLayoutChanged?.Invoke();
        }
    }
    public event Action OnLayoutChanged;
}

第二步：注册状态服务 #

在Program.cs中添加服务注册：

• Blazor Server 注册为作用域服务：

builder.Services.AddScoped<LayoutState>();

• Blazor WebAssembly 注册为单例服务：

builder.Services.AddSingleton<LayoutState>();

第三步：修改App.razor绑定动态布局 #

将原写死的默认布局替换为状态绑定，同时监听布局变更事件刷新组件：

@inject LayoutState LayoutState
@implements IDisposable

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@LayoutState.CurrentLayout" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@LayoutState.CurrentLayout">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    protected override void OnInitialized()
    {
        LayoutState.OnLayoutChanged += StateHasChanged;
    }
    public void Dispose()
    {
        LayoutState.OnLayoutChanged -= StateHasChanged;
    }
}

第四步：登录后触发布局切换 #

在登录逻辑处注入LayoutState，验证通过后直接修改布局属性即可全局生效：

@inject LayoutState LayoutState

// 登录验证通过后执行
LayoutState.CurrentLayout = typeof(AfterLoginLayout);

如果需要刷新页面后保持布局状态，只需要在LayoutState的构造函数中从本地存储/身份声明中读取登录状态，初始化CurrentLayout值即可。 #

方案2：自定义路由视图实现（适合无需手动控制切换的场景） #

如果只需要根据登录状态自动切换布局，可以直接继承RouteView实现自动判断：

public class DynamicRouteView : RouteView
{
    [Inject]
    private AuthenticationStateProvider AuthProvider { get; set; }
    protected override async Task RenderViewAsync(RenderTreeBuilder builder)
    {
        var authState = await AuthProvider.GetAuthenticationStateAsync();
        DefaultLayout = authState.User.Identity?.IsAuthenticated == true 
            ? typeof(AfterLoginLayout) 
            : typeof(BeforeLoginLayout);
        await base.RenderViewAsync(builder);
    }
}

最后将App.razor中的RouteView替换为自定义的DynamicRouteView即可，每次路由切换都会自动判断登录状态加载对应布局。 #

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