1. 首先，按照 Ant Design Blazor 文档中介绍的方式安装 AntDesign 包和服务注册。

2. 修改项目中的 App.razor 文件，把 RouteView 替换成 ReuseTabsRouteView。

<Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            @*<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />*@
            <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
 </Router>

3. 修改项目中的 MainLayout.razor 文件

 <div class="main">
-       <div class="top-row px-4">
-           <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
-       </div>
-       <div class="content px-4">
-           @Body
-       </div>
+       <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
    </div>

4.两种方式自定义标签名称

• 如果是纯文本，可以在页面组件使用 ReuseTabsPageTitle 特性。

@page "/counter"
+ @attribute [ReuseTabsPageTitle("Counter")]

• 如果需要使用模板来获取动态的标签名，比如添加另一个组件，或者从页面内容中获取标题，需要实现 IReuseTabsPage 接口：

@page "/"
+ @implements IReuseTabsPage

<h1>Hello, world!</h1>

@code{
+   public RenderFragment GetPageTitle() =>
+       @<div>
+           <Icon Type="home"/> Home
+       </div>
+   ;
}