vue中路由缓存问题产生的原因是什么?解决方式有哪些?

本文探讨了Vue Router中缓存引发的问题,如组件不渲染和数据获取受限。提出两种解决方案:使用`key`避免组件重复渲染和利用`onBeforeRouteUpdate`在路由更新时重新加载数据。关键在于权衡性能与组件可见性,通常情况下首选`key`,但高需求场景下选择后者。

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

1. 缓存产生的原因
   vue-router 为了性能考虑 如果路径不变 对应的组件也不会重新渲染

2. 导致的问题
   组件不渲染  生命周期钩子函数也就不执行  依赖钩子函数发送网络请求的逻辑就无法执行
   新数据无法获取 

3. 解决思路
   根据思路: 
     1. 组件的生命周期钩子函数重新执行
     2. 把发送网络请求的函数重新执行
     
   方案: 
     1. key  二级路由 router-view :key="$route.fullPath"
     2. onBeforeRouteUpdate 每次路由更新都会重新执行 
        onBeforeRouteUpdate((to)=>{
          loadData(to.params.id)
        })


   如何选择?
     1. 大多数情况 都选择key 
     2. 如果性能要求比较高 选择第二种方案
     
  性能问题
     加上key  组件重新渲染 组件会进行一个从无到有的过程 (耗费的资源多)
     onBeforeRouteUpdate  路由更新之后 只会执行自己的回调函数  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值