vue.js 2.0项目遇到的问题整理(持续更新中)

本文介绍如何在Vue.js中使用<keep-alive>组件进行缓存管理,包括排除特定组件不被缓存的方法及如何通过设置max属性解决缓存组件间的互相干扰问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题一:vue.js 如何设置某个组件不被keep-alive?

vue.js 2.1.0+可设置<keep-alive>includeexclude属性来条件控制组件的缓存

<keep-alive include="RegularBusList">
  <router-view></router-view>
</keep-alive>

链接直达:keep-alive

问题二:vue.js 被keep-alive的组件如何主动销毁?

问题:

<router-view>标签include两个不同路由的组件A、B,并且在组件的watch属性添加$route的监听器用于获取更新数据,当A组件被缓存后,切换路由进入B组件页面,B组件被缓存,此时进入页面会触发A组件$route的监听器,怎么在进入B组件时销毁被缓存的A组件?

不可行方案:

当页面要进入的是B组件所在页面时,在A组件的beforeRouteLeave钩子函数中调用this.$destroy();这样能清除缓存,但是发现下次重新进入A组件页面时,新创建的A组件不会被缓存;还会出现一些奇怪的问题

解决方案:

vue.js 2.5.0+可设置<keep-alive>max属性(设置为1时进入B组件时会清除A组件的缓存,不会触发A组件$route的监听器)

相关链接:
issue
尤大的commit

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值