vue2中的keep-alive的写法
vue2和vue3都要在需要缓存 的路由下面写上自定义属性
{
path: '/home',
name: 'home',
component: () => import('../components/home/Home.vue'),
meta: {
keepAlive: true
}
},
vue2的keep-alive 的用法
<template>
<div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
vue3的keep-alive 的用法
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"></component>
</keep-alive>
<!-- 这里component是vue中的特殊组件,:is是用来绑定指定组件 -->
<component :is="Component" v-if="!$route.meta.keepAlive"></component>
</router-view>