介紹

vue-multi-tab 是一套基於 vue 和 element-ui 的 , 實現了 tab-router (一個基於 tab 的路由) 的 單頁面, 多頁籤 應用程式.

我之前寫這個專案的時候,有寫了一篇 記一次基於vue的spa多頁籤實踐經驗
然後就部分熱心網友就在下面回覆了一些其他類似的專案,我逐一查看了一下,發現基本都是基於 vue-router 和 keep-alive 實現的,這種實現方法有兩個比較明顯的問題,第一是很難在頁籤內部跳轉,比如我現在這個頁籤開啟的是元件a,然後點選元件a裡面的某個連結,我想跳轉到元件b,但是是需要在頁籤不變的情況下開啟,不能在新的頁籤開啟,這樣基於路由的就很難實現.
另一個問題就是 需要處理 keep-alive

那麼我這個 vue-multi-tab 跟其他產品有什麼不同呢?－－除了實現多頁籤功能以為,我們還有很多跟其他同類產品不同的特性,如下.

線上預覽

https://noahlam.github.io/vue-multi-tab/

主要特性：

1. 可以在頁籤內像 vue-router 一樣跳轉元件
2. 沒有 keep-alive,所以也無需處理 keep-alive 問題
3. 雙重歷史記錄(頁籤內部歷史記錄和頁籤歷史記錄)
4. 類似 vue-router 的 API(push,replace,back)
5. 所有元件均預設為非同步載入(當然你也可以改成同步的)
6. 可以單 tab 重新整理

API 列表

1. open 開啟一個頁籤
2. close 關閉一個頁籤
3. showTab 切換 tab
4. push 標籤內跳轉
5. replace 標籤內替換
6. back 標籤內後退
7. closeAll 關閉所有標籤
8. closeOthers 關閉除當前標籤外的所有標籤
9. reShow 根據地址欄資料,回顯標籤和標籤內的元件
10. query 獲取 push,replace 傳遞的引數
11. info 獲取 當前啟用的 tab 物件

tips: 更詳細的 API 文件請看 這裡

其他說明

專案地址 vue-multi-tab,如果你覺得有用,給個 star 鼓勵一下.

因為我本身就是個很討厭記很多API的人,所以僅提供幾個簡單又能滿足絕大部分需求的API,目的就是為了降低學習成本.

如果你覺得無法滿足你的需求或使用中發現 bug 或疑問 歡迎 在這裡提issue

個人精力有限,還有很多地方需要你的共同參與,如果你興趣一起維護,歡迎 pr.

來源：https://segmentfault.com/a/1190000016035662