最近在写一个个人练手的项目,前端本想着vue3.0应该和2.0差不太多,学习成本应该不高,所以就使用了vue3.0来做项目的前端,现在有点裂开。建议学习vue2.0做项目做习惯的小伙伴不要轻易的转3.0。
一、Vue2.0的keep-alive使用
vue2.0中直接在你想要做缓存的位置,一般使用场景为配合router-view进行使用。
<template>
<!-- vue2.x配置 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</template>
二、Vue3.0的keep-alive使用
Vue3.0配合的slot插槽使用,使用is来绑定对应路由的组件。
ps:修改添加key值的绑定,如果不加key值无法实现页面缓存。
<template>
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/>
</router-view>
</template>
三、路由router添加meta配置
可以注释哪一页面需要使用缓存,但是也可以不设置,不设置的情况需要将上面的属性都删掉。如果需要更多的缓存限制,可以看底下的参考网站。
const routes = [
{
path: '/keepalive',
name: 'keepalive',
component: ()=>import('../views/keepalive.vue'),
meta: {
keepAlive: false //设置页面是否需要使用缓存
}
}
]