vue-keep-alive介绍

　　下面所讲是针对Vue2.x，据说keep-alive的用法在Vue3.x已经出现变化了，以及生命周期方法destroyed等周期方法也更名了，所以下面的演示是居于2.x的

　　跳转到父路由对应的组件时，子路由对应组件是可以不显示出来的。但跳转到子路由对应的组件，父路由对应的组件是会显示出来的，这点要记住。

　　在默认情况下，路由之间的切换会导致组件的切换，组件的切换会意味着，切换前的组件是会被摧毁掉，因此每次切换都会伴随着一个新组件的创建和旧组件的消亡；但有很多时候我们并不希望旧组件在切换时被摧毁，而是一直保持状态，保持生命周期，那这样的话 keep-alive就能起到作用了

　　keep-alive是Vue已经内置的组件，不需要再次安装可直接使用，使用的方法比较简单，直接用keep-alive标签包裹router-view即可，这样的话router-view所展示的组件都会被缓存下来，即保持他们的生命状态，如下：

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

 　　但要注意一点：router-view展示的组件会被缓存下来，如果该组件有子组件的话，子组件是不会被缓存下来的，也就是子组件会被正常摧毁掉。想要子组件不被摧毁掉，很简单，只要在父组件中再加上keep-alive即可。

　　然后keep-alive也有一些属性，比如下面：

 

 　　举个例子：

    <keep-alive exclude="组件名或正则表达式">
      <router-view></router-view>
    </keep-alive>

　　然后再看下Vue3.x的keepalive用法：

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>

　　Component代表当前展示的组件