【Vue3.0】Vue3.0的keep-alive使用

1,925

最近在写一个个人练手的项目,前端本想着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 //设置页面是否需要使用缓存
    }
  }
 ]

参考网站

为首推荐官网文档