快捷導(dǎo)航

vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能

更新時(shí)間：2023年04月23日 10:10:54 作者：土豆兒哥

如何在我們切換tab標(biāo)簽的時(shí)候，緩存標(biāo)簽最后操作的內(nèi)容，簡單來說就是每個(gè)標(biāo)簽頁中設(shè)置的比如搜索條件及結(jié)果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時(shí)候還能保持原樣，這篇文章介紹vue3?keep-alive實(shí)現(xiàn)tab頁面緩存功能，感興趣的朋友一起看看吧

先上圖

如何在我們切換tab標(biāo)簽的時(shí)候，緩存標(biāo)簽最后操作的內(nèi)容，簡單來說就是每個(gè)標(biāo)簽頁中設(shè)置的比如搜索條件及結(jié)果、分頁、新增、編輯等數(shù)據(jù)在切換回來的時(shí)候還能保持原樣。

看看keep-alive是如何實(shí)現(xiàn)該功能的。

首先我們要了解keep-alive的基本使用。

具體介紹請查看官方文檔（https://cn.vuejs.org/guide/built-ins/keep-alive.html#basic-usage）

這里有幾個(gè)問題需要注意一下：

1、需要考慮頁面共用的問題，如“新增/編輯”不是彈窗而是跳轉(zhuǎn)頁面，打開新增頁面返回列表點(diǎn)擊編輯頁面，如果不做緩存清理跳轉(zhuǎn)的將還是新增頁面。

2、當(dāng)頁面關(guān)閉時(shí)再次打開如何清理之前的緩存。

廢話不多說，上代碼：

先創(chuàng)建一個(gè)處理緩存路由的文件 useRouteCache.ts

import { ref, nextTick, watch } from 'vue'
import store from '../store'

const caches = ref<string[]>([])
let collect = false

export default function useRouteCache() {
  const route = store.state

  // 收集當(dāng)前路由相關(guān)的緩存
  function collectRouteCaches() {
    route.visitedView.forEach((routeMatch) => {
      const componentName: any = routeMatch?.name

      // 已打開的路由組件添加到緩存
      if (!componentName) {
        return
      }
      addCache(componentName)
    })
  }

  // 收集緩存（通過監(jiān)聽）
  function collectCaches() {
    if (collect) {
      return
    }
    collect = true
    watch(() => route.path, collectRouteCaches, {
      immediate: true
    })
  }

  // 添加緩存的路由組件
  function addCache(componentName: string | string[]) {
    if (Array.isArray(componentName)) {
      componentName.forEach(addCache)
      return
    }

    if (!componentName || caches.value.includes(componentName)) return
    caches.value.push(componentName)
  }

  // 移除緩存的路由組件
  function removeCache(componentName: string | string[]) {
    if (Array.isArray(componentName)) {
      componentName.forEach(removeCache)
      return
    }

    const index = caches.value.indexOf(componentName)
    //
    if (index > -1) {
      return caches.value.splice(index, 1)
    }
  }

  // 移除緩存的路由組件的實(shí)例
  async function removeCacheEntry(componentName: string) {
    if (removeCache(componentName)) {
      await nextTick()
      addCache(componentName)
    }
  }

  return {
    collectCaches,
    caches,
    addCache,
    removeCache,
    removeCacheEntry
  }
}

然后在動(dòng)態(tài)路由頁面進(jìn)行引入：

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="caches" :max="10">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import useRouteCache from './hooks/useRouteCache'
export default defineComponent({
  name: 'Main',
  setup() {
    const { caches } = useRouteCache()
    // 收集已打開路由tabs的緩存
    const { collectCaches } = useRouteCache()
    onMounted(collectCaches)

    return {
      caches
    }
  }
})
</script>

這里做的是菜單可配置的，也就是從后臺讀取的。如果是本地路由更簡單，只需要在路由對象meta中加入keep屬性，true表示當(dāng)前路由需要緩存，false則不需要緩存

之前說的兩個(gè)問題，這里說下解決辦法：

在我們的tabbar（也就是tab標(biāo)簽）組件中，監(jiān)聽路由變化時(shí)進(jìn)行判斷，新增頁面是不帶參數(shù)的，編輯頁帶參數(shù)，通過這個(gè)進(jìn)行緩存清除

watch: {
      const findItem: any = this.state.visitedView.find(
        (it) => it.name === newVal.name
      )
      if (
        findItem &&
        newVal.name === findItem?.name &&
        newVal.fullPath !== findItem?.fullPath
      ) {
        // 同一個(gè)路由，但是新舊路徑不同時(shí)，需要清除路由緩存。例如route.path配置為 '/detail/:id'時(shí)路徑會(huì)不同
        removeCacheEntry(newVal.name)
      } else {
        addCache(newVal.name)
      }
    }
  }

還有就是當(dāng)我們關(guān)閉tab頁時(shí)清除路由緩存

removeTab(name) {
      const findItem: any = this.state.visitedView.find(
        (it) => it.fullPath === name
      )
      if (findItem) {
        store.removeVisitedView(findItem).then((_) => {
          if (this.currentTab === name) {
            this.currentTab =
              this.state.visitedView[this.state.visitedView.length - 1].fullPath
            this.$router.push(this.currentTab)
          }
        })
        // 同時(shí)移除tab緩存
        removeCache(findItem.name || '')
      }
    }

這里的路由都是保存在store中，可根據(jù)自己項(xiàng)目進(jìn)行相應(yīng)的修改即可完成頁面的緩存功能。

到此這篇關(guān)于vue3 keep-alive實(shí)現(xiàn)tab頁面緩存的文章就介紹到這了,更多相關(guān)vue3 keep-alive頁面緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: