温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用vue3 keep-alive实现tab页面缓存功能

发布时间:2023-04-24 17:37:01 来源:亿速云 阅读:205 作者:iii 栏目:开发技术

本篇内容介绍了“怎么使用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页面缓存功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI