zoukankan      html  css  js  c++  java
  • 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代表当前展示的组件

  • 相关阅读:
    leetcode Super Ugly Number
    leetcode Find Median from Data Stream
    leetcode Remove Invalid Parentheses
    leetcode Range Sum Query
    leetcode Range Sum Query
    leetcode Minimum Height Trees
    hdu 3836 Equivalent Sets
    hdu 1269 迷宫城堡
    hud 2586 How far away ?
    poj 1330 Nearest Common Ancestors
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14609850.html
Copyright © 2011-2022 走看看