Vue實現一個帶有緩存功能的Tab頁簽功能

更新時間：2024年08月23日 10:38:46 作者：前端學步

在現代?Web?應用中,Tab?頁簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會丟失當前視圖的狀態(tài),本文將介紹如何在?Vue?項目中實現一個帶有緩存功能的?Tab?頁簽功能,需要的朋友可以參考下

概述

在現代 Web 應用中，Tab 頁簽功能是非常常見的一種交互模式。它可以幫助用戶在不同的視圖間快速切換，而不會丟失當前視圖的狀態(tài)。為了進一步提升用戶體驗，我們可以通過 keep-alive 組件來緩存已經打開的視圖，這樣即使用戶離開并再次回到這個視圖，也可以看到之前的狀態(tài)。

本文將介紹如何在 Vue 項目中實現一個帶有緩存功能的 Tab 頁簽功能。

效果實現

點擊左側菜單欄，添加tab頁及頁面緩存，關閉tab頁，刪除頁面緩存

功能實現（只展示核心代碼）

一、使用 keep-alive 緩存路由

為了實現頁面緩存，我們需要使用 keep-alive 組件。首先，在 App.vue 中引入 keep-alive 并

將其包裹在 <router-view> 外面。同時，我們可以使用 include 屬性來指定哪些組件應該被緩存。

<!-- 緩存路由 -->
<keep-alive :include="cacheViews">
    <router-view></router-view>
</keep-alive>

二、點擊左側菜單，添加頁簽并添加緩存標記

在左側菜單欄組件（例如 MenuTree.vue）中，我們需要監(jiān)聽用戶的點擊事件，以便在點擊某個菜單項時添加新的頁簽。同時，我們也需要將該組件的 name 添加到 cachedViews 數組中，以標記該組件應被緩存。請注意，這里的 name必須與頁面組件name、路由name保持一致。

// 點擊左側菜單時添加tab頁簽，添加緩存頁面
        const findIndex = this.existedTabs.findIndex(v => {
            return v.name == item.name
        })
        if(findIndex == -1) {
            // tab頁簽中不存在，push進去
            this.existedTabs.push(item);
            this.cacheViews.push(item.name)
        }
        this.$store.commit("saveTabsList", this.existedTabs); // 保存tab標簽頁
        this.$store.commit("saveCacheViews", this.cacheViews); // 保存需要緩存頁面組件

三、關閉頁簽，刪除緩存標記

在關閉頁簽時，我們需要從 cachedViews 數組中移除對應的組件名稱，以取消對該組件的緩存。

// 關閉tab頁簽時，刪除緩存標記
        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) {
        // 當前菜單，跳轉至后面/前面一個菜單
        if (findIndex < this.tabsListArray.length) {
          this.$router.push({
            name: this.tabsListArray[findIndex].name,
          });
        } else {
          this.$router.push({
            name: this.tabsListArray[findIndex - 1].name,
          });
        }
      }

總結來說，通過上述步驟，我們成功實現了動態(tài)添加菜單頁簽并緩存功能。在實際應用中，還需要考慮一些細節(jié)，如處理未緩存頁面的刷新等。希望這篇文章能對您有所幫助！

到此這篇關于Vue實現一個帶有緩存的Tab頁簽功能的文章就介紹到這了,更多相關Vue實現Tab頁簽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: