VUE 爬坑之旅--优雅的使用 keep-alive

vue 项目中，路由缓存是一个常见的需求和功能，官方文档里面有说到，如果要保存某个组件的状态或避免重新渲染，可以使用 keep-alive 组件，文档里面说的比较简单，就只是用 keep-alive 组件包裹某个或几个组件，这样做的话功能是可以实现，但未免不够优雅（如果我有很多组件都需要做缓存处理，或者某个需要缓存的组件在很多地方都要用到，难道需要在每个使用的地方都写上 keep-alive 吗？太麻烦了，有没有更好的实现方式。）

在一顿 google 之后，找到了一种比较优雅的实现方式。
首先，在 App.vue 这个根组件里面写下如下代码

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

keep-alive 都知道是干嘛用的了，那 v-if 里面的这个 $route.meta.keepAlive 东西是哪里来的呢，这个呢就是我们接下来要做的，写在路由表里面的东西。

每个路由都可以给它定义 meta 属性，我们可以给想要缓存功能的路由定义一个 meta 对象，在里面定义一个 keepAlive 属性，值为 true，这个 meta 对象里面还可以定义其他的属性，比如 title。

        {
            path: '/guideList',
            name: 'GuideList',
            meta: {keepAlive: true, title: 'title'},
            component: GuideList
        },

经过这么一顿骚操作之后，我们就可以在路由表里面灵活的进行配置了，需要缓存的路由就给它配置一下，不需要的就不写或者设置为 false，简单，方便又优雅。