vue：之keep-alive缓存机制

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34505202/article/details/84839288

最近在做vue项目的缓存，写下自己的小心得。keep-alive文档。

1.全部缓存

<keep-alive>
    <router-view></router-view>
</keep-alive>

2.部分缓存

①在路由引入处设置（一般是App.vue,视具体情况而定,放对位置很重要）

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

②在路由处设置

{
            path: '/',
            name: 'Hello',
            component: Hello,
            meta: {
                keepAlive: true// 需要缓存
            }
        },

3.与transition结合使用

    <transition>
      <!-- 缓存设置 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>

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