设置了keep-alive但缓存不生效的问题!!!

 keep-alive：

• 是vuejs中的一个内置组件，它主要用于缓存不活跃的组件实例(包括缓存组件的状态)。

• 而不是销毁和重新创建他们，这样，当组件再次被访问时，它不需要重新初始化 ，从而提高了性能。

• 与keep-alive相关的生命周期（vue3中）

  • onActived()

  • onDeActived()

问题描述：

需求：子页面中的分页跳转到其他页时，在不刷新的情况下希望保持着最后一次跳转的页面。

遇到的问题：keep-alive没有缓存不活跃的组件实例。

解决问题的步骤:

1. 查看keep-live组件的include属性是否和组件的name一致，在vue3中SFC(单文件组件)的name我是通过再添加一个script标签来添加的，如下图：

app中的keep-alive

//app.vue
<router-view v-slot="{ Component }">
    <keep-alive include="productList">
        <component :is="Component" />
    </keep-alive>
</router-view>

从上面我们可以看得出，keep-alive的include属性值和我组件的name是一致的，那么我们的问题就不是name和include不一致的问题。

2.路由嵌套问题，我的keep-alive用在app.vue文件中(上图)，而在aside侧边栏的产品列表模块是mian的子路由。

<el-main>
    //产品列表渲染在这里
    <router-view></router-view>
</el-main>

而我把keep-alive这个内置组件放在了app.vue中没有缓存组件实例效果，那么这时候我们可以把代码修改成以下的样子：

//把
<el-main>
    <router-view></router-view>
</el-main>
-------------------------------------------------------------------------------------
//修改为
<el-main>
    <router-view v-slot="{ Component }">
        <keep-alive include="productList">
            <component :is="Component" />
        </keep-alive>
    </router-view>
</el-main>

至此问题就解决了！！！

(此篇文章为解决相关问题提供一个思路和我入坑到解决问题的方法记录，如有不妥，望海涵!)