如何在Blazor中简洁设置页面标题，支持布局默认与页面覆写？

核心实现：使用官方内置 PageTitle 组件 #

从.NET 6开始，Blazor提供了原生的PageTitle组件，完全满足「MainLayout设置默认标题+子页面选择性覆写」的需求，属于官方推荐的简洁方案，并非取巧操作。

步骤1：在MainLayout中配置默认标题 #

在MainLayout.razor里添加全局默认的PageTitle组件，作为所有页面的标题 fallback：

@inherits LayoutComponentBase

<PageTitle>我的默认站点标题</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

步骤2：子页面选择性覆写标题 #

需要自定义标题的页面，直接在页面顶部添加专属的PageTitle组件即可，它会自动覆盖MainLayout中的默认标题：

@page "/counter"

<PageTitle>计数器页面</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

额外技巧：动态拼接标题（可选） #

如果需要实现「默认标题前缀+子页面自定义后缀」的效果，可以在MainLayout中通过级联值或路由监听实现：

@inherits LayoutComponentBase

<PageTitle>@FullTitle</PageTitle>

@code {
    private string FullTitle = "我的站点 | 首页";

    // 通过级联值接收子页面传递的标题后缀
    [CascadingParameter]
    public string PageTitleSuffix { get; set; } = "首页";

    protected override void OnParametersSet()
    {
        FullTitle = $"我的站点 | {PageTitleSuffix}";
    }
}

子页面传递自定义后缀：

@page "/counter"
@attribute [CascadingParameter(Name = "PageTitleSuffix")] string _ => "计数器"

<h1>Counter</h1>
<!-- 页面内容 -->

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