亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue實現(xiàn)一個帶有緩存功能的Tab頁簽功能

 更新時間:2024年08月23日 10:38:46   作者:前端學(xué)步  
在現(xiàn)代?Web?應(yīng)用中,Tab?頁簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會丟失當(dāng)前視圖的狀態(tài),本文將介紹如何在?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實現(xiàn)骨架屏的示例代碼

    Vue實現(xiàn)骨架屏的示例代碼

    骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)。本文將利用Vue實現(xiàn)簡單的骨架屏,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-03-03
  • Vite3遷移Webpack5的實現(xiàn)

    Vite3遷移Webpack5的實現(xiàn)

    本文主要介紹了Vite3遷移Webpack5的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • vue3封裝Element導(dǎo)航菜單的實例代碼

    vue3封裝Element導(dǎo)航菜單的實例代碼

    這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • 在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例

    在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例

    今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue?實現(xiàn)新國標(biāo)紅綠燈效果實例詳解

    Vue?實現(xiàn)新國標(biāo)紅綠燈效果實例詳解

    這篇文章主要為大家介紹了Vue?實現(xiàn)新國標(biāo)紅綠燈效果實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能

    基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有需要的小伙伴可以參考一下
    2023-10-10
  • vue打包后,用后端接口報錯304、404問題

    vue打包后,用后端接口報錯304、404問題

    這篇文章主要介紹了vue打包后,用后端接口報錯304、404問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 關(guān)閉eslint檢查和ts檢查的簡單步驟記錄

    關(guān)閉eslint檢查和ts檢查的簡單步驟記錄

    這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-02-02
  • Vue在原窗口與新窗口打開外部鏈接的實現(xiàn)代碼

    Vue在原窗口與新窗口打開外部鏈接的實現(xiàn)代碼

    這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實現(xiàn)代碼,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能

    Vue3使用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

最新評論