Vue3中如何运用keep-alive并配合transition实现页面缓存效果

最编程 2024-08-02 19:42:10

...

正确用法

在组件中使用（这里结合了 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>

vue中keep-alive的使用及详解

上一篇： TCP keepAlive

下一篇：理解ThreadPoolExecutor线程池中的keepAliveTime设置