vue2 如何用keepAlive做组件缓存

前言

相信各位小伙伴在开发vue2项目时有这么一个需求，部分指定的组件需要做缓存，其他不需要。此时只需要在router/index.js路由里给需要做缓存的组件添加meta属性，同时设置上keepAlive为true和deepth深度修改为1，具体流程我们看下方代码。

操作步骤

1、打开App.vue，将以下代码替换进去

 // App.vue
 <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />

上面代码意思为：
$route我们都知道是路由对象，里面保存着某个路由它自身的所有属性，用v-if三元判断哪个路由身上的meta属性下的keepAlive值为true，那么就用缓存，否则不缓存，是不是非常简单。

2、需要缓存的组件在路由中添加meta属性

   meta: {
        keepAlive: true, 
        deepth: 1,
      }

完整代码

// router -> index.js
export default new Router({
  routes: [
    {
      path: "/",
      name: "index",
      // 关键在这下面三行，这个组件就是缓存的啦
      meta: {
        keepAlive: true, 
        deepth: 1,
      },
      component: () => import("@/pages/home/index"),
     }
   ]
}) 

后话

这篇文章主要是给自己做个笔记，同时能帮到正在找个方案的同学，好了，我们下一篇文章见。😊