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

  • 相关阅读:
    java多线程
    golang编码转换
    golang csv,xls,xlsx
    golang 资源
    electron安装
    Ubuntu系统下面软件安装更新命令
    golang代码执行顺序
    datatables使用
    Echarts柱形图颜色设置
    golang chan 超时
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14609850.html
Copyright © 2011-2022 走看看