Vue實現(xiàn)一個帶有緩存功能的Tab頁簽功能
概述
在現(xiàn)代 Web 應(yīng)用中,Tab 頁簽功能是非常常見的一種交互模式。它可以幫助用戶在不同的視圖間快速切換,而不會丟失當(dāng)前視圖的狀態(tài)。為了進(jìn)一步提升用戶體驗,我們可以通過 keep-alive 組件來緩存已經(jīng)打開的視圖,這樣即使用戶離開并再次回到這個視圖,也可以看到之前的狀態(tài)。
本文將介紹如何在 Vue 項目中實現(xiàn)一個帶有緩存功能的 Tab 頁簽功能。
效果實現(xiàn)
點擊左側(cè)菜單欄,添加tab頁及頁面緩存,關(guān)閉tab頁,刪除頁面緩存
功能實現(xiàn)(只展示核心代碼)
一、使用 keep-alive 緩存路由
為了實現(xiàn)頁面緩存,我們需要使用 keep-alive 組件。首先,在 App.vue 中引入 keep-alive 并
將其包裹在 <router-view> 外面。同時,我們可以使用 include 屬性來指定哪些組件應(yīng)該被緩存。
<!-- 緩存路由 --> <keep-alive :include="cacheViews"> <router-view></router-view> </keep-alive>
二、點擊左側(cè)菜單,添加頁簽并添加緩存標(biāo)記
在左側(cè)菜單欄組件(例如 MenuTree.vue)中,我們需要監(jiān)聽用戶的點擊事件,以便在點擊某個菜單項時添加新的頁簽。同時,我們也需要將該組件的 name 添加到 cachedViews 數(shù)組中,以標(biāo)記該組件應(yīng)被緩存。請注意,這里的 name必須與頁面組件name、路由name保持一致。
// 點擊左側(cè)菜單時添加tab頁簽,添加緩存頁面 const findIndex = this.existedTabs.findIndex(v => { return v.name == item.name }) if(findIndex == -1) { // tab頁簽中不存在,push進(jìn)去 this.existedTabs.push(item); this.cacheViews.push(item.name) } this.$store.commit("saveTabsList", this.existedTabs); // 保存tab標(biāo)簽頁 this.$store.commit("saveCacheViews", this.cacheViews); // 保存需要緩存頁面組件
三、關(guān)閉頁簽,刪除緩存標(biāo)記
在關(guān)閉頁簽時,我們需要從 cachedViews
數(shù)組中移除對應(yīng)的組件名稱,以取消對該組件的緩存。
// 關(guān)閉tab頁簽時,刪除緩存標(biāo)記 const findIndex = this.tabsListArray.findIndex((v) => { return v.name == targetName; }); if (findIndex > -1) { this.tabsListArray.splice(findIndex, 1); const findIndexCacheViews = this.cacheViews.indexOf(targetName); if (findIndexCacheViews > -1) { this.cacheViews.splice(findIndex, 1); } } this.$store.commit("saveTabsList", this.tabsListArray); this.$store.commit("saveCacheViews", this.cacheViews); if (targetName == this.activename) { // 當(dāng)前菜單,跳轉(zhuǎn)至后面/前面一個菜單 if (findIndex < this.tabsListArray.length) { this.$router.push({ name: this.tabsListArray[findIndex].name, }); } else { this.$router.push({ name: this.tabsListArray[findIndex - 1].name, }); } }
總結(jié)來說,通過上述步驟,我們成功實現(xiàn)了動態(tài)添加菜單頁簽并緩存功能。在實際應(yīng)用中,還需要考慮一些細(xì)節(jié),如處理未緩存頁面的刷新等。希望這篇文章能對您有所幫助!
到此這篇關(guān)于Vue實現(xiàn)一個帶有緩存的Tab頁簽功能的文章就介紹到這了,更多相關(guān)Vue實現(xiàn)Tab頁簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue?實現(xiàn)新國標(biāo)紅綠燈效果實例詳解
這篇文章主要為大家介紹了Vue?實現(xiàn)新國標(biāo)紅綠燈效果實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有需要的小伙伴可以參考一下2023-10-10Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能
vue-office是一個支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能,需要的朋友可以參考下2024-04-04