本篇内容介绍了“怎么使用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页面缓存功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。