資訊專欄INFORMATION COLUMN
摘要：介紹是一套基于和的實現(xiàn)了一個基于的路由的單頁面多頁簽應用程序我之前寫這個項目的時候有寫了一篇記一次基于的多頁簽實踐經(jīng)驗然后就部分熱心網(wǎng)友就在下面回復了一些其他類似的項目我逐一查看了一下發(fā)現(xiàn)基本都是基于和實現(xiàn)的這種實現(xiàn)方法有兩個比
介紹
vue-multi-tab 是一套基于 vue 和 element-ui 的 , 實現(xiàn)了 tab-router (一個基于 tab 的路由) 的 單頁面, 多頁簽 應用程序.
我之前寫這個項目的時候,有寫了一篇 記一次基于vue的spa多頁簽實踐經(jīng)驗
然后就部分熱心網(wǎng)友就在下面回復了一些其他類似的項目,我逐一查看了一下,發(fā)現(xiàn)基本都是基于 vue-router 和 keep-alive 實現(xiàn)的,這種實現(xiàn)方法有兩個比較明顯的問題,第一是很難在頁簽內(nèi)部跳轉(zhuǎn),比如我現(xiàn)在這個頁簽打開的是組件a,然后點擊組件a里面的某個鏈接,我想跳轉(zhuǎn)到組件b,但是是需要在頁簽不變的情況下打開,不能在新的頁簽打開,這樣基于路由的就很難實現(xiàn).
另一個問題就是 需要處理 keep-alive 的問題,有趟過 keep-alive 的坑的童鞋基本都了解,基于以上原因,我決定給大家一個 不太一樣的實現(xiàn)方式
那么我這個 vue-multi-tab 跟其他產(chǎn)品有什么不同呢?－－除了實現(xiàn)多頁簽功能以為,我們還有很多跟其他同類產(chǎn)品不同的特性,如下.
在線預覽https://noahlam.github.io/vue-multi-tab/
主要特性：可以在頁簽內(nèi)像 vue-router 一樣跳轉(zhuǎn)組件
沒有 keep-alive,所以也無需處理 keep-alive 問題
雙重歷史記錄(頁簽內(nèi)部歷史記錄和頁簽歷史記錄)
類似 vue-router 的 API(push,replace,back)
所有組件均默認為異步加載(當然你也可以改成同步的)
可以單 tab 刷新
API 列表open 打開一個頁簽
close 關閉一個頁簽
showTab 切換 tab
push 標簽內(nèi)跳轉(zhuǎn)
replace 標簽內(nèi)替換
back 標簽內(nèi)后退
closeAll 關閉所有標簽
closeOthers 關閉除當前標簽外的所有標簽
reShow 根據(jù)地址欄數(shù)據(jù),回顯標簽和標簽內(nèi)的組件
query 獲取 push,replace 傳遞的參數(shù)
info 獲取 當前激活的 tab 對象
tips: 更詳細的 API 文檔請看這里其他說明
項目地址 vue-multi-tab,如果你覺得有用,給個 star 鼓勵一下.
因為我本身就是個很討厭記很多API的人,所以僅提供幾個簡單又能滿足絕大部分需求的API,目的就是為了降低學習成本.
如果你覺得無法滿足你的需求或使用中發(fā)現(xiàn) bug 或疑問 歡迎 在這里提issue
個人精力有限,還有很多地方需要你的共同參與,如果你興趣一起維護,歡迎 pr.
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108230.html
摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現(xiàn)方法有興趣，歡迎點擊本文結(jié)尾的鏈接，去我的倉庫上查看。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實現(xiàn)多頁簽,并且可以通過瀏...
摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現(xiàn)方法有興趣，歡迎點擊本文結(jié)尾的鏈接，去我的倉庫上查看。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實現(xiàn)多頁簽,并且可以通過瀏...
摘要：多個頁簽的顯示，其實不難，有現(xiàn)成的組件，于是老夫?qū)懘a就是一把梭，擼起袖子就是干，噼里啪啦一頓寫，寫完一測，沒有任何問題，實在是不要太簡單，丟給產(chǎn)品預覽復制瀏覽器地址到別的地方粘貼，不能正確回顯內(nèi)需要實現(xiàn)跳轉(zhuǎn)，而且要能返回。 前言 最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，...
閱讀 1027·2021-11-22 14:56
閱讀 1004·2021-11-11 16:54
閱讀 7865·2021-09-23 11:55
閱讀 3017·2021-09-22 15:57
閱讀 2801·2021-08-27 16:25
閱讀 678·2019-08-30 15:55
閱讀 1671·2019-08-30 15:43
閱讀 1605·2019-08-30 14:23
