解决路由缓存问题

文章讨论了Vue路由中遇到的缓存问题,即路径相同但参数不同导致组件复用而内容无法更新。提供了解决方案:一是为`<RouterView>`添加动态key,二是利用`onBeforeRouteUpdate`导航钩子在路由更新前执行数据更新。
摘要由CSDN通过智能技术生成

缓存问题:当路由path一样,参数不同的时候会选择直接复用路由对应的组件,将会导致部分内容不能更新

解决问题的思路

  1. 让组件实例不复用,强制销毁重建
  2. 监听路由变化,变化之后执行数据更新操作

解决方案:

方案一:给router-view添加key以当前路由完整路径为key的值,给router-view组件绑定

<RouterView :key="$route.fullpath">

方案二:使用onBeforeRouteUpdate导航钩子

onBeforeRouteUpdate钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可

import {onBeforeRouteUpdate} from 'vue-Router'
onBeforeRouteUpdate((to, from)=> {
	//数据更新业务逻辑
})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值