vue-multi-tab--一個讓你在SPA里使用多頁簽的框架頁

netScorpion 發布于2019-08-26 12:12 / 1444人閱讀

摘要：介紹是一套基于和的實現了一個基于的路由的單頁面多頁簽應用程序我之前寫這個項目的時候有寫了一篇記一次基于的多頁簽實踐經驗然后就部分熱心網友就在下面回復了一些其他類似的項目我逐一查看了一下發現基本都是基于和實現的這種實現方法有兩個比

介紹

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.

GPU云服務器云服務器多頁應用構建多頁應用更新多頁多行數據框架頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108230.html

記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

ispring 2019-08-26 12:13 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

張遷 2019-08-02 11:15 評論0 收藏0
canvas菜鳥基于小程序實現圖案在線定制功能

摘要：多個頁簽的顯示，其實不難，有現成的組件，于是老夫寫代碼就是一把梭，擼起袖子就是干，噼里啪啦一頓寫，寫完一測，沒有任何問題，實在是不要太簡單，丟給產品預覽復制瀏覽器地址到別的地方粘貼，不能正確回顯內需要實現跳轉，而且要能返回。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，...

darkerXi 2019-08-26 12:13 評論0 收藏0