Blazor中动态修改head内容需使用内置HeadOutlet组件配合HeadContent块。必须在根布局（如App.razor）中添加<HeadOutlet/>，并在组件内用<HeadContent>包裹title、meta等标签，支持绑定与自动清理。
Blazor 中动态修改 `
` 内容（如 title、meta、link、style 等）主要靠 Microsoft.AspNetCore.Components.Web.Extensions 提供的HeadOutlet 组件配合 HeadContent 实现。.NET 6+ 已内置支持，无需额外 NuGet 包（旧版本需手动安装）。启用 HeadOutlet（必须第一步）
在根布局文件（通常是 App.razor 或 _Host.cshtml 对应的布局）中，确保已添加 <HeadOutlet />：
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
<p><HeadOutlet /> <!-- 放在 Router 外面，但仍在 Body 内 -->在组件中动态写入 HeadContent
在任意 Razor 组件（.razor）中使用 <HeadContent> 块，其中内容会自动注入到页面 `
- 支持 HTML 标签：
<title>、<meta>、<link>、<style>、<script>（仅静态注入，不执行 JS） - 内容可绑定参数或状态，实现“动态”效果
- 组件卸载时，对应内容会自动移除，避免重复或残留
示例：根据路由参数设置页面标题和描述
@page "/article/{Id}"
@inject NavigationManager Nav
<p><h2>@articleTitle</h2>
<p>@articleContent</p></p><p><HeadContent>
<title>@articleTitle - My Blog</title>
<meta name="description" content="@articleDescription" />
<meta property="og:title" content="@articleTitle" />
</HeadContent></p><p>@code {
[Parameter] public string Id { get; set; }
private string articleTitle = "Loading...";
private string articleDescription = "";</p><pre class='brush:php;toolbar:false;'>protected override void OnInitialized()
{
// 模拟加载文章数据
articleTitle = $"Article #{Id}";
articleDescription = $"This is the description for article {Id}.";
}}
注意点和常见问题
-
<HeadContent>必须在组件的顶级作用域（不能嵌套在@if、@foreach或自定义组件内），否则编译报错 - 若需条件渲染，用 C# 逻辑拼接字符串再输出（不推荐），更稳妥的是用多个
<HeadContent>配合@if包裹整个块 - SEO 友好：服务端渲染（SSR）或静态生成（SSG）模式下，这些 head 内容会真实出现在初始 HTML 中
- JS 注入限制：动态插入的
<script>标签不会自动执行（出于安全），如需运行脚本，请用IJSRuntime手动调用
替代方案（轻量场景）
如果只改标题，可用 NavigationManager + PageTitle 组件（.NET 7+ 更简洁）：
<PageTitle>@pageTitle</PageTitle>
<p>@code {
private string pageTitle = "Home";
}</p>它本质是 HeadContent 的语法糖，适合简单 title 场景。
基本上就这些。核心就是 HeadOutlet + HeadContent，结构清晰、无副作用、天然支持组件生命周期。
