vue3缓存页面

已于 2023-12-15 11:43:22 修改
阅读量186 收藏
点赞数
文章标签： vue.js
于 2023-12-15 11:41:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lth002/article/details/135013498
版权
文章介绍了如何在Vue中使用`keep-alive`组件来缓存特定页面（如home），避免全局缓存导致内存占用。重点在于理解`router-view`中的组件管理和`include`或`exclude`属性的运用。
摘要由CSDN通过智能技术生成

看了官方文档，发现keep-alive只能缓存组件，然后不知道咋缓存页面了，直到看了这代码,原来页面对于router-view来说，就是组件，因此可以使用keep-alive来进行页面缓存。

<router-view v-slot="{ Component }">
   <keep-alive include="home">
      <component :is="Component"></component>
   </keep-alive>
 </router-view>

如果不加include或者exclude，那就是缓存所有页面，一般不能这样做，所有页面都缓存，会占大量的内存，keep-alive具体用法，就看上面的官方文档,include或者exclude里面的值是页面的名字,如果页面使用的是<script setup>,这个页面名字就是文件名
在这里插入图片描述

奶昔不会射手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 除了keep-alive，还有哪些页面缓存的实现方案
郊眠寺
10-28 3193
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue3的keepalive页面缓存
newbodyheart的博客
07-19 1507
vue3 keepAlive
vue3页面缓存方案
Dreamaple
07-02 6458
VUE3+pinia+vue-router实现页面缓存
VUE工程的keep-alive缓存机制（全部缓存、部分缓存、定向缓存）
最新发布
2401_84153102的博客
05-14 1040
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue3实现页面缓存
qq_40787608的博客
03-23 870
vue3实现页面缓存
vue3.0 列表页面做缓存
weixin_48813932的博客
04-09 667
一.设置动态keepalive 可以将要缓存的页面作为vuex全局变量储存。
Vue3除了keep-alive，还有哪些页面缓存的实现方案
chengbo_eva的博客
07-22 751
Vue3除了keep-alive，还有哪些页面缓存的实现方案
vue页面跳转实现页面缓存操作
10-15
3. **设置导航钩子**：在需要缓存的页面（如A页面）中，我们可以利用`beforeRouteLeave`导航守卫。在用户离开A页面时，将`shouldCache`设为`false`，确保离开时不会保留状态。同时，其他页面（如C页面）在跳转到B...
vue项目强制清除页面缓存的例子
10-16
今天小编就为大家分享一篇vue项目强制清除页面缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue服务端渲染页面缓存和组件缓存的实例详解
12-01
在本文中，我们将深入探讨Vue在服务端如何进行页面缓存和组件缓存，以提高应用性能和用户体验。 **页面缓存** 在Vue服务端渲染中，页面缓存能够减少服务器的计算量，加快对相同页面的响应速度。LRU（Least ...
vue Tab切换以及缓存页面处理的几种方式
10-16
主要介绍了vue Tab切换以及缓存页面处理的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于vue里页面的缓存详解
10-16
今天小编就为大家分享一篇关于vue里页面的缓存详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3利用keepAlive缓存页面
发果叁
01-17 3049
项目中经常会有这么一个需求，一个表单页面，可能需要跳转其他页面拿到对应的数据，再跳回表单页面，但是之前填写过的数据还在。而某些页面跳这个表单页面的时候，是不需要缓存，因为他是新增，如果是缓存的话，那么上次填的数据，下次进入这个表单页面的时候，那么数据还存在，明显不符合设计的要求。在维护该 key 的时候，我使用的是一个全局变量维护，利用 hooks 的形式，在各个页面之间进行设置，当然这只是比较简单的一种处理方法，其实方法有很多，也可以用状态管理器 vuex 或 pinia。
vue3页面缓存keep-alive的使用和需要注意的问题（页面不缓存）
weixin_46526589的博客
03-23 1684
vue3页面缓存keep-alive的使用和需要注意的问题（页面不缓存）
Vue3 除了 keep-alive，还有哪些实现页面缓存的方法
热爱可抵岁月漫长
05-27 3452
有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。
vue3使用keep-alive缓存页面
weixin_46237561的博客
09-21 644
keep-alive是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。切换路由时防止dom重新渲染。
vue3中使用了keep-alive来缓存页面使用onActivated和onDeactivated生命周期
kanno的博客
02-01 1572
vue3中使用了keep-alive来缓存页面使用onActivated和onDeactivated生命周期（部分不缓存）
【Vuejs】1683- Vue3除了keep-alive，还有哪些页面缓存的实现方案
pingan8787
05-15 266
引言有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。但是，这个方案有个很不好的地方就是：如果列表页足够复杂，有下拉刷新、下拉加载、有弹窗、有轮播等，...
vue3页面缓存keep-alive
MadSnail00的博客
12-06 1558
页面缓存，keep-alive，include未生效
vue怎么缓存页面数据
05-02
Vue可以通过keep-alive组件来缓存页面数据。keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。当组件在keep-alive内被切换时，它的activated和deactivated这两个生命周期钩子函数将会被对应触发。 可以将需要缓存的组件包裹在keep-alive组件中，如下所示： ``` <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> ``` 在路由配置中，通过meta属性来控制是否开启缓存，如下所示： ``` const router = new VueRouter({ routes: [ { path: '/', component: Home, meta: { keepAlive: true } // 缓存该路由组件 }, { path: '/about', component: About, meta: { keepAlive: false } // 不缓存该路由组件 } ] }) ``` 在这个例子中，Home组件将被缓存，而About组件将不会被缓存。当用户从Home页面切换到About页面时，Home组件将被缓存，About组件将重新渲染。当用户再次返回Home页面时，Home组件将从缓存中恢复，避免重新渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值