怎么使用vue3?keep-alive實現tab頁面緩存功能

本篇內容介紹了“怎么使用vue3 keep-alive實現tab頁面緩存功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

先上圖

如何在我們切換tab標簽的時候，緩存標簽最后操作的內容，簡單來說就是每個標簽頁中設置的比如搜索條件及結果、分頁、新增、編輯等數據在切換回來的時候還能保持原樣。

看看keep-alive是如何實現該功能的。

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

這里有幾個問題需要注意一下：

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

2、當頁面關閉時再次打開如何清理之前的緩存。

廢話不多說，上代碼：

先創建一個處理緩存路由的文件 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

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

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

  // 收集緩存（通過監聽）
  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)
    }
  }

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

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

然后在動態路由頁面進行引入：

<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表示當前路由需要緩存，false則不需要緩存

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

在我們的tabbar（也就是tab標簽）組件中，監聽路由變化時進行判斷，新增頁面是不帶參數的，編輯頁帶參數，通過這個進行緩存清除

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

還有就是當我們關閉tab頁時清除路由緩存

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)
          }
        })
        // 同時移除tab緩存
        removeCache(findItem.name || '')
      }
    }

這里的路由都是保存在store中，可根據自己項目進行相應的修改即可完成頁面的緩存功能。

“怎么使用vue3 keep-alive實現tab頁面緩存功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！