vue: The keep-alive caching mechanism

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/qq_34505202/article/details/84839288

Cache vue recently doing the project, write your own little experience. keep-alive documents .

1. All Cache

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

2. Partial Cache

① introducing the routing setting (typically App.vue, as the case may be, is important to the discharge position)

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

② set route at

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

3. in combination with 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>