Blazor Server (.NET 8)如何实现无样式/JS的独立页面布局？

针对你的需求，有三种实用方案可以实现，根据场景选择即可：

方案1：基于路由路径的条件渲染（最简单） #

直接在App.razor中通过当前路由路径判断，选择性加载全局样式和JS资源：

1. 改造App.razor：

@inject NavigationManager NavManager

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor应用</title>
    @{
        // 定义需要跳过全局资源的路由前缀
        var skipGlobalResources = NavManager.Uri.Contains("/login") || 
                                 NavManager.Uri.StartsWith($"{NavManager.BaseUri}report");
    }
    @if (!skipGlobalResources)
    {
        <!-- 仅非特殊页面加载这些资源 -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/site.css" />
        <script src="js/site.js"></script>
    }
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

2. 给特殊页面设置空布局：
   在Login.razor、Report.razor等页面顶部添加@layout null，避免加载MainLayout：

@page "/login"
@layout null

<h1>登录页面</h1>
<!-- 登录表单内容 -->

方案2：用特性标记特殊页面（更灵活） #

通过自定义特性标记需要无资源的页面，再在路由中判断是否加载全局资源，适合路由规则复杂的场景：

1. 创建自定义特性类：

// 在项目中新建类文件NoGlobalResourcesAttribute.cs
public class NoGlobalResourcesAttribute : Attribute
{
}

2. 给特殊页面添加特性：

@page "/login"
@layout null
@attribute [NoGlobalResources]

<h1>登录页面</h1>

3. 改造App.razor，替换原<Routes />为自定义Router逻辑：

@inject NavigationManager NavManager

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor应用</title>
    @if (!_skipGlobalResources)
    {
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/site.css" />
        <script src="js/site.js"></script>
    }
</head>
<body>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            @{
                // 检查当前页面是否有NoGlobalResources特性
                _skipGlobalResources = routeData.PageType?
                    .GetCustomAttributes<NoGlobalResourcesAttribute>()
                    .Any() ?? false;
            }
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>页面未找到</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">抱歉，该地址不存在任何内容。</p>
            </LayoutView>
        </NotFound>
    </Router>
    <script src="_framework/blazor.web.js"></script>
</body>

@code {
    private bool _skipGlobalResources;
}

方案3：独立根组件（最彻底） #

给特殊页面配置完全独立的根组件，彻底隔离全局资源，适合对隔离性要求极高的场景：

1. 创建CleanApp.razor（干净的根组件）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@PageTitle</title>
    <!-- 无任何自定义样式/JS -->
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

2. 在Program.cs中配置多根组件路由：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// 普通页面使用默认App.razor根组件
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .Where(ctx => !ctx.Request.Path.StartsWithSegments("/login") && 
                  !ctx.Request.Path.StartsWithSegments("/report"));

// 特殊页面使用CleanApp.razor根组件
app.MapRazorComponents<CleanApp>()
    .AddInteractiveServerRenderMode()
    .Where(ctx => ctx.Request.Path.StartsWithSegments("/login") || 
                  ctx.Request.Path.StartsWithSegments("/report"));

app.Run();

3. 给特殊页面设置空布局（同方案1）：

@page "/report/{id}"
@layout null

<h1>报表页面 @id</h1>
<!-- 报表内容 -->

注意事项 #

• Blazor核心脚本<script src="_framework/blazor.web.js"></script>是必须保留的，它是Blazor运行的基础，你的需求中“无JS执行”应该指自定义业务JS，而非Blazor本身的脚本。
• 如果特殊页面不需要任何布局元素（菜单、页眉等），务必添加@layout null，否则会默认加载MainLayout。

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