Blazor如何根据请求路径动态切换加载对应CSS样式文件

问题根因 #

你使用的是Blazor Server的SPA运行模式，_Host.cshtml 仅在站点首次服务端渲染时执行一次，后续页面路由切换都是Blazor前端框架内部处理，不会重新请求服务端刷新整个页面，因此你写在_Host里的路径判断逻辑不会再次触发，CSS自然不会动态更新。

推荐实现方案 #

方案1：全局监听路由变化 + JS互操作切换CSS（最推荐，无重复代码） #

步骤1：给_Host.cshtml中的CSS link标签添加id，方便后续JS操作

将原有link标签修改为：

<link id="main-stylesheet" rel="stylesheet" href="css/site.min.css" />

步骤2：在全局公共布局MainLayout.razor中添加路由监听逻辑

MainLayout是全站页面的公共父布局，所有路由变化都会触发它的生命周期回调，添加代码如下：

@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

protected override void OnInitialized()
{
    // 注册路由变化监听事件
    NavManager.LocationChanged += OnLocationChanged;
}

private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
{
    // 解析当前访问路径
    var currentPath = new Uri(e.Location).AbsolutePath.ToLowerInvariant();
    string targetCss = currentPath.StartsWith("/students") ? "students.min.css" : "site.min.css";
    // 调用JS方法修改CSS链接
    await JSRuntime.InvokeVoidAsync("changeStylesheet", targetCss);
}

// 组件销毁时取消事件监听，避免内存泄漏
public async ValueTask DisposeAsync()
{
    NavManager.LocationChanged -= OnLocationChanged;
}

步骤3：在_Host.cshtml中新增切换CSS的全局JS方法

<script>
function changeStylesheet(cssFileName) {
    const link = document.getElementById('main-stylesheet');
    if (link) {
        link.href = `css/${cssFileName}`;
    }
}
</script>

该方案不需要修改任何业务页面，一次配置全站生效，维护成本极低。

方案2：模块级CSS隔离（样式区分度高时可选） #

如果不同模块的样式完全独立，也可以直接使用Blazor原生的CSS隔离特性，给每个模块的页面/组件单独配套.razor.css文件，Blazor会在运行时自动按需加载对应样式，不需要手动做路径判断。

不推荐的做法 #

完全不需要在每个页面重复添加判断逻辑，会产生大量冗余代码，后续调整样式匹配规则时需要修改所有页面，维护成本极高。

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