介紹
vue-multi-tab 是一套基於 vue 和 element-ui 的 , 實現了 tab-router (一個基於 tab 的路由) 的 單頁面, 多頁籤 應用程式.
我之前寫這個專案的時候,有寫了一篇 記一次基於vue的spa多頁籤實踐經驗
然後就部分熱心網友就在下面回覆了一些其他類似的專案,我逐一檢視了一下,發現基本都是基於 vue-router 和 keep-alive 實現的,這種實現方法有兩個比較明顯的問題,第一是很難在頁籤內部跳轉,比如我現在這個頁籤開啟的是元件a,然後點選元件a裡面的某個連結,我想跳轉到元件b,但是是需要在頁籤不變的情況下開啟,不能在新的頁籤開啟,這樣基於路由的就很難實現.
另一個問題就是 需要處理 keep-alive 的問題,有趟過 keep-alive 的坑的童鞋基本都瞭解,基於以上原因,我決定給大家一個 不太一樣的實現方式
那麼我這個 vue-multi-tab 跟其他產品有什麼不同呢?－－除了實現多頁籤功能以為,我們還有很多跟其他同類產品不同的特性,如下.
線上預覽
https://noahlam.github.io/vue-multi-tab/
主要特性：
- 可以在頁籤內像
vue-router一樣跳轉元件 - 沒有
keep-alive,所以也無需處理keep-alive問題 - 雙重歷史記錄(頁籤內部歷史記錄和頁籤歷史記錄)
- 類似
vue-router的 API(push,replace,back) - 所有元件均預設為非同步載入(當然你也可以改成同步的)
- 可以單 tab 重新整理
API 列表
- open 開啟一個頁籤
- close 關閉一個頁籤
- showTab 切換 tab
- push 標籤內跳轉
- replace 標籤內替換
- back 標籤內後退
- closeAll 關閉所有標籤
- closeOthers 關閉除當前標籤外的所有標籤
- reShow 根據位址列資料,回顯標籤和標籤內的元件
- query 獲取 push,replace 傳遞的引數
- info 獲取 當前啟用的 tab 物件
tips: 更詳細的 API 文件請看這裡
其他說明
專案地址 vue-multi-tab,如果你覺得有用,給個 star 鼓勵一下.
因為我本身就是個很討厭記很多API的人,所以僅提供幾個簡單又能滿足絕大部分需求的API,目的就是為了降低學習成本.
如果你覺得無法滿足你的需求或使用中發現 bug 或疑問 歡迎 在這裡提issue
個人精力有限,還有很多地方需要你的共同參與,如果你興趣一起維護,歡迎 pr.