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