vue中的切换缓存keep-alive

最新推荐文章于 2024-08-20 14:02:59 发布

平平Pe

最新推荐文章于 2024-08-20 14:02:59 发布

阅读量1.1k

点赞数

分类专栏：前端开发前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_45757134/article/details/117899213

版权

本文介绍了Vue中解决组件切换时刷新问题的解决方案——keep-alive。通过组件缓存和路由组件缓存两种方式，详细阐述了如何使用keep-alive进行缓存控制。包括include和exclude属性的应用，以及在路由配置中使用meta属性进行部分路由组件的缓存处理。同时指出，页面刷新会导致缓存失效，若需持久化缓存，需借助本地存储。

摘要由CSDN通过智能技术生成

文章目录

前言
一、组件缓存
二、路由组件缓存

前言

每次切换新标签的时候，vue都会去创建新的实例。但是切换的组件的内容，是不会被缓存下来的，再次切换回来还是会进行刷新。
为了解决这个问题，vue缓存keep-alive就出现了。vue中切换缓存分为两种，其一是组件缓存，其二是路由组件缓存。
keep-alive 是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能。

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件缓存

<button @click='flag = "testA"'>testA</button>
<button @click='flag = "testB"'>testB</button>

<keep-alive> // 哪里要用到缓存，就在哪个位置外面嵌套keep-alive标签进行了
    <components :is="flag"></components>
</keep-alive>
    
data(){