问答

vue项目如何使用keep-alive实现动态缓存?

作者:admin 2021-04-18 我要评论

我想实现从tagView切换页面的时候,希望页面能够缓存起来,这样切换的时候不会重新实例化组件,当我从tagView关闭页面,然后从menu从新打开的时候,我希望此时页...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image
我想实现从tagView切换页面的时候,希望页面能够缓存起来,这样切换的时候不会重新实例化组件,当我从tagView关闭页面,然后从menu从新打开的时候,我希望此时页面能够重新实例化。
我能想到的就是在<router-view/>组件上面在加个父组件<keep-alive/>,但是这样有一个问题就是,不管你是从tagView切换页面还是从menu打开页面,页面永远都会被缓存啊!所以很迷惑应该怎么做,请大佬指点。

###

页面设置:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
    </router-view>
</keep-alive>

在该页面路由里面设置 meta 属性

 meta: {
            keepAlive: true // 需要被缓存
        }

在tagView组件里面设置 beforeRouteLeave:

 beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 页面 缓存,即不刷新
            next();
        }

在menu设置:

 beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // 让 页面 不缓存,即刷新
            next();
        }
###

可以在 keep-alive 中 添加一个动态的 includeexclude 来决定是否需要缓存;
类似

    <keep-alive :include="includeList">
      <route-view />
    </keep-alive> 

以下是官方解释:

  • includeexclude

    The includeexclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- regex (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- Array (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive> 

    匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

  • max

    最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。

    <keep-alive :max="10">
      <component :is="view"></component>
    </keep-alive>

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器