介紹
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