AntDesignBlazor组件库的路由复⽤多标签页介绍
前⾔
Blazor 是 .NET 最新的前端框架，可以基于 WebAssembly 或 SignalR （WebSocket）构建前端应⽤程序，基于 WebAssembly 托管模型的 Blazor 甚⾄可以离线运⾏。再加上可以共⽤ .NET 类库，能使代码量⽐以往的基于 JS 的前后端分离模型少 1/3。⽽且现在 .NET 开发者也可以使⽤⾃⼰熟悉的技术和经验来开发前端应⽤了，不同技术栈的开发⼈员之间的沟通成本也⼤⼤减少，从⽽再⼀次解放了⽣产⼒。
所以，Blazor 是 .NET 开发者的⼜⼀⽣产⼒技术！
通过使⽤ Blazor 社区⽣态开源的 UI 组件库，常⽤的组件都被封装了起来，⽤户再也不需要写 JS 和 CSS 了，使得 .NET 开发⼈员在社区⾥连连称赞。⽬前，已经有⼤量的基于 Blazor 构建的企业级应⽤程序被部署上线，逐渐被企业认可。
正⽂
什么是路由复⽤多标签页
Ant Design Blazor 组件库中的多标签页（点击原⽂查看动图）
本⽂标题中的路由复⽤，是 Angular 的 RouteReuseStrategy 中的概念，在中⽂社区也常被称作“多标签页”，主要的功能是当切换页⾯时，保持页⾯的状态，并且可以通过任意切换页⾯，当前展⽰的页⾯状态能够恢复。通常是被⽤在⽐较复杂的后台管理系统，⽤户可以在筛选了表格后，进⼊记录的详情
页，再回到列表页后，仍然能保持原来的搜索条件、翻页数等等；也或者是填写表单时，需要去别的页⾯查看正确的信息，在回到表单时，表达上已填过的内容不会丢失。
⽽由于天然的能复⽤ C# 代码的优势， Blazor 通常被⽤于构建后台管理系统，所以使⽤标签页就成为了普遍的需求。然鹅，Blazor 官⽅团队并没有给我们直接提供这样的组件，所以就需要社区的⼩伙伴来实现了。
但是纵观社区中的⼏个开源组件库，都只是实现了通⽤的 Tabs 标签页组件，只能当作切换⾯板来使⽤。要⽤来实现“多标签页”的功能，要么不⽀持，要么还得要直接或间接地依赖⾃⼰菜单组件和布局组件，再要依赖页⾯⽂件路径，拼接出页⾯组件的类型，最后⽤反射来创建页⾯组件……
虽然说它们确实实现了多标签页的功能，但是实现⽅式不甚优雅。耦合度⾮常⾼，只能在组件库⾃⼰的框架布局中使⽤，⽽不能单独拎出来使⽤。另外，反射的性能也不好，还要把页⾯按照约定放置，对⽤户种种制约。
当然，社区中还流传⼀个⽐较认可的⽅案，就是 BlazorDemoMultiPagesTab 项⽬。它提供了⼀个原型，通过结合 Blazor 内置的路由组件实现了路由多标签页。但问题是它只是⼀个 demo，只实现了原理，代码⽐较凌乱，作者也没有再做整理，也没有封装成组件，如果想在⾃⼰项⽬中使⽤起来，肯定会薅秃⾃⼰的头发的。
Ant Design Blazor 中的 ReuseTabs 组件
最近，在 Ant Design Blazor 组件库中实现多标签页组件的呼声⽇益⾼涨。于是，我利⽤周末时间，基于 BlazorDemoMultiPagesTab 中提供的思路，结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件。
ReuseTabs 组件只包含两个⼦组件，ReuseTabsRouteView 和 ReuseTabs，其中 ReuseTabsRouteView 继承⾃内置的 RouteView 组件，负责接管页⾯组件的⽣命周期，使页⾯组件能够保持状态或被销毁；ReuseTabs 负责标签的展⽰和交互。除此之外，没有再依赖菜单、布局之类的其他组件，因此可以直接⽤于任何 Blazor 应⽤程序，也可以很好地与其他组件库⼀起使⽤。
主要的特点
只需修改两处代码即可应⽤
⽀持静态或动态地设置标签名
与路由同步，⽀持 <a> 标签、NavigationManger 等各种⽅式的跳转
下⾯介绍⼀下基础的使⽤⽅法，以 dotnet new 模板项⽬为例。
使⽤⽅法
1. ⾸先，按照 Ant Design Blazor ⽂档中介绍的⽅式安装 AntDesign 包和服务注册。
2. 然后，修改项⽬中的 App.razor ⽂件，把 RouteView 替换成 ReuseTabsRouteView。
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
-      <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+      <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
...
</Router>
3. 修改项⽬中的 MainLayout.razor ⽂件，
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
-      <div class="top-row px-4">
-          <a href="blazor" 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>
</div>
4. 两种⽅式⾃定义标签名
@page "/counter"
+ @attribute [ReuseTabsPageTitle("Counter")]
@page "/"
+ @implements IReuseTabsPage
<h1>Hello, world!</h1>
@code{
+  public RenderFragment GetPageTitle() =>
+      @<div>
ant安装包+          <Icon Type="home"/> Home
+      </div>
+  ;
}
如果需要使⽤模板来获取动态的标签名，⽐如添加另⼀个组件，或者从页⾯内容中获取标题，需要实现 IReuseTabsPage 接⼝：
如果是纯⽂本，可以在页⾯组件使⽤ ReuseTabsPageTitle 特性。
注意：当前 ReuseTabs 组件在 0.9.0 版本的每⽇构建包中，在正式发布之前，需要参考⽂档中介绍的⽅式[1]来安装。
后续功能
⽬前该组件只实现了基本的功能，还有⼀些功能在后续的计划当中：
右键菜单
代码⽅式关闭
缓存策略
路由守卫与权限控制
后记
Blazor 社区中对多标签页的呼声有⼀年多了，这⼏天终于实现了，国内外的社区都⼀⽚欢腾，也是颇有成就感的。
对于实现的细节，感兴趣的同学可以到 Ant Design Blazor 的源码中查看，也只是⼏个⽂件。当然，如果感兴趣的同学⽐较多，我也可以写⼀篇详细的⽂章来介绍。
其实我是⽐较希望社区中能有更多的爱好者站出来，分享⼼得、贡献开源项⽬，这样才能让社区健康发展起来。Ant Design Blazor 发展⾄今已有⼀年有多，但是说实话相对于其他组件库项⽬的作者，我
⾃⼰的投⼊的时间和贡献并没有很多。其中除了贡献代码，⼀⼤部分精⼒都花在了社区的运营。为项⽬作宣传，把路⼈变成⽤户，再把⽤户变成贡献者，让更多⼈各⾃花少量精⼒，达到众⼈拾柴的效果，才是开源项⽬得以长期活跃的长久之计。
最后还是⾮常感激⽀持我们的⽤户和贡献者！他们的每个 issue、案例和 PR 都是对我们的肯定，也是让我们坚持的动⼒！
参考链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。