全网最细！Vue3实现路由缓存~

您所在的位置：网站首页 › vue3组件路由守卫 › 全网最细！Vue3实现路由缓存~

全网最细！Vue3实现路由缓存~

2024-07-14 14:07| 来源: 网络整理| 查看: 265

1、设置缓存对应的数据

需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）

const coreStore = defineStore('coreStore', { state () { return { // 缓存页面路由数组及组件 cacheRoutes: [], includeComs: [], cacheComs: new Map() } }, actions: { setCacheRoute (route: { fullPath: string, name: string }): void { this.cacheRoutes.push(route) } }, })

在根组件 App.vue 中引入进来

const store = costore(); const { cacheRoutes, includeComs, cacheComs } = store 2、路由生命周期设置

在 App.vue 组件中，需要设置路由进入前的守卫函数，用于将对应组件进行缓存：

import { useRoute, useRouter } from "vue-router"; const route = useRoute(); const router = useRouter(); router.beforeEach((to, from, next) => { // 1 判断内部是否已有改缓存页面 const bol = cacheRoutes.some(v => v.fullPath === to.fullPath) // 2 如果不存在，则存进缓存标签数组中 !bol && cacheRoutes.push({ fullPath: to.fullPath, name: to.meta.title }) // 3 缓存组件对应的路由名称 !includeComs.includes(to.fullPath) && includeComs.push(to.fullPath); next() }) 3、将路由组件进行缓存

这个是 Vue3 的写法，不适用与 Vue2

4、formatComponentInstance

这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个 A.vue 组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）

在访问 A?a=1 和 A?a=2 两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂载渲染

因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存

import { compile, h, nextTick, onMounted, ref, watch } from "vue"; // 显示组件时，替换组件 name，解决同个组件路由不一致问题 const formatComponentInstance = (component, route) => { let wrapper; if (component) { const wrapperName = route.fullPath if (cacheComs.has(wrapperName)) { wrapper = cacheComs.get(wrapperName); } else { wrapper = { name: wrapperName, render() { return h(component); }, } cacheComs.set(wrapperName, wrapper); } } return h(wrapper); }

【本文地址】

全网最细！Vue3实现路由缓存~

全网最细！Vue3实现路由缓存~

今日新闻

推荐新闻