当前位置：首页 > news >正文

vue3中keep-alive的使用及结合transition使用

news 2025/7/5 10:12:51

正确用法

在组件中使用（这里结合了 transition 内置动画组件）

<template><div class="layout clearfix"><router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" v-if="!route.meta.keepAlive"><component :is="Component" :key="route.name" /></transition><transition name="fade-transform" mode="out-in" v-if="route.meta.keepAlive"><keep-alive><component :is="Component" :key="route.name"/></keep-alive></transition></router-view></div>
</template><script setup>
import { onActivated, onDeactivated } from 'vue'
// 在 keep-alive 组件激活时调用
onActivated(() => {console.log('onActivated')
})
// 在 keep-alive 组件停用时调用
onDeactivated(() => {console.log('onDeactivated')
})
</script>

在router.js中配置 keepAlive 自定义属性

import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'layout',component: () => import('../layout/index.vue'),children: [{path: '/home',name: 'home',component: () => import('../views/home.vue'),meta{title: '工作台',keepAlive: true}},]},{path: '/login',name: 'login',component: () => import('../views/login.vue')},{path: '/:pathMatch(.*)',component: () => import('../views/404.vue')}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

根据条件缓存页面

<template><div id="app">// 1. 基本用法<router-view v-slot="{ Component, route }"><keep-alive><component :is="Component" :key="route.path"></component></keep-alive></router-view>// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用<router-view v-slot="{ Component, route }"><keep-alive include='a,b'><component :is="Component" key="route.path"></component></keep-alive></router-view>// 3. 使用正则表达式，需使用 v-bind<router-view v-slot="{ Component, route }"><keep-alive :include='/a|b/'><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 4.数组 (使用 `v-bind`)<router-view v-slot="{ Component, route }"><keep-alive include="['a', 'b']"><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 5.使用 max 通过传入 max 来限制可被缓存的最大组件实例数<router-view v-slot="{ Component, route }"><keep-alive :max="10"><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 6. 将不缓存 name 为 test 的组件<router-view v-slot="{ Component, route }"><keep-alive exclude='test'><component :is="Component" key="route.path"></component></keep-alive>	</router-view></div>
</template><script setup></script>

错误示例

VueCompilerError: expects exactly one child element or component.

 <router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/><keep-alive><component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/></keep-alive></transition>
</router-view>

不报错，但 keep-alive 内置组件的缓存没有效果，onActivated 函数也不会执行

 <router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/></transition><keep-alive><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/></transition></keep-alive>
</router-view>