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