前言

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 模板項目為例。

使用方法

首先，按照 Ant Design Blazor 文檔中介紹的方式安裝 AntDesign 包和服務注冊。

然后，修改項目中的 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>

修改項目中的 MainLayout.razor 文件，

@inherits LayoutComponentBase<div class="page"><div class="sidebar"><NavMenu /></div><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> </div>

兩種方式自定義標簽名

@page "/counter" + @attribute [ReuseTabsPageTitle("Counter")] @page "/" + @implements IReuseTabsPage<h1>Hello, world!</h1>@code{ + public RenderFragment GetPageTitle() => + @<div> + <Icon Type="home"/> Home + </div> + ; }

• 如果需要使用模板來獲取動態的標簽名，比如添加另一個組件，或者從頁面內容中獲取標題，需要實現 IReuseTabsPage 接口：

• 如果是純文本，可以在頁面組件使用 ReuseTabsPageTitle 特性。

注意：當前 ReuseTabs 組件在 0.9.0 版本的每日構建包中，在正式發布之前，需要參考文檔中介紹的方式^[1]來安裝。

后續功能

目前該組件只實現了基本的功能，還有一些功能在后續的計劃當中：

• 右鍵菜單

• 代碼方式關閉

• 緩存策略

• 路由守衛與權限控制

后記

Blazor 社區中對多標簽頁的呼聲有一年多了，這幾天終于實現了，國內外的社區都一片歡騰，也是頗有成就感的。

對于實現的細節，感興趣的同學可以到 Ant Design Blazor 的源碼中查看，也只是幾個文件。當然，如果感興趣的同學比較多，我也可以寫一篇詳細的文章來介紹。

其實我是比較希望社區中能有更多的愛好者站出來，分享心得、貢獻開源項目，這樣才能讓社區健康發展起來。Ant Design Blazor 發展至今已有一年有多，但是說實話相對于其他組件庫項目的作者，我自己的投入的時間和貢獻并沒有很多。其中除了貢獻代碼，一大部分精力都花在了社區的運營。為項目作宣傳，把路人變成用戶，再把用戶變成貢獻者，讓更多人各自花少量精力，達到眾人拾柴的效果，才是開源項目得以長期活躍的長久之計。

最后還是非常感激支持我們的用戶和貢獻者！他們的每個 issue、案例和 PR 都是對我們的肯定，也是讓我們堅持的動力！

參考鏈接

• https://github.com/BlazorPlus/BlazorDemoMultiPagesTab

• https://github.com/ant-design-blazor/demo-reuse-tabs

• https://antblazor.com/docs/nightly-build

總結

以上是生活随笔為你收集整理的Ant Design Blazor 组件库的路由复用多标签页介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。