vue keep-alive 缓存 不生效解决方案

一、作用

vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据

二、用法

与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们）

 

与**【vue-router】**一起用：

   

三、设置缓存条件

【include】 和 【exclude】（2.1.0新增）

逗号分隔字符串：

正则表达式 (使用 v-bind)：

数组 (使用 v-bind)：

【max】 (2.5.0新增)

数字。最多可以缓存多少组件实例：

四、相关钩子函数

【activated】 和 【deactivated】

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。

keep-alive的页面：

第一次进入：created-> mounted-> activated，退出：deactivated。

再次进入，触发activated（这时我们可以拿到组件的所有data，可在此节点做一些请求更新页面数据）

五、！！！keep-alive不生效实例

订单页面A（有tab标签），点击跳转到详情页面B，当详情页B返回到订单tab列表页B时，需要保持之前的tab选中状态。

keep-alive设置

   

router设置

  {

    path: '/list'，

    name: 'List',

    component: () => import('@/views/order/list'),

    meta: {keepAlive: true}  // 设置页面缓存，保持tab状态

    },

    {

    path: '/detail'，

    name: 'Detail',

    component: () => import('@/views/order/detail'),

    meta: {keepAlive: false}  // 不需要缓存

    },

结果发现，订单tab列表页缓存并没有生效！！！

原因分析：

通过v-if来判断是否生成keep-alive，当列表页面A符合条件时，内存缓存了组件状态。当跳转到详情页B时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面A进行销毁，再次进入到A会重新创建。

正确写法：

写法一：（v-if挂载到router-view上面）

   

写法二：(使用include属性，设置需要缓存的组件)

   

原文链接：https://blog.csdn.net/qq_36131788/article/details/107559632