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代表当前展示的组件

posted @ 2021-04-02 11:52  爱编程DE文兄  阅读(119)  评论(0编辑  收藏  举报