Vue3如何解决路由缓存问题(响应路由参数的变化)
更新时间：2024年03月01日 14:42:52 作者：小秀_heo
这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
官方文档解释：
解决问题的思路：
- 让组件实例不复用,强制销毁重建
- 监听路由变化,变化之后执行数据更新操作
方案一：给router-view添加key
以当前路由完整路径为key 的值，给router-view组件绑定
<RouterView :key="$route.fullPath" />
所以添加 key之后会强制替换组件，重新发送所有请求（某些情况下不需要重新发送所有请求，会造成性能浪费），而非复用。
方案二：使用 beforeRouteUpdate 导航钩子
beforeRouteUpdate 钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可。
这里只需要 getCategory 重新请求，而 getBanner 不重新请求。
注意点：
- 这里 id 会变化，不传入则使用 默认id，使用 to 的目的在于获取将要到达路由的 params参数。
- 又因为 onBeforeRouteUpdate 是在跳转之前就执行的钩子，所以只能通过 to 来获取即将到达的路由的参数。
const getCategory = async (id = route.params.id) => {
const res = await getCategoryAPI(id)
categoryData.value = res.result
}
const getBanner = async () => {
const res = await getBannerAPI({
distributionSite: '2'
})
bannerList.value = res.result
}
onMounted(() => {
getCategory()
getBanner()
})
// 路由参数变化的时候，可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=> {
getCategory(to.params.id)
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2023-12-12
vue3中emit('update:modelValue')使用简单示例
这篇文章主要给大家介绍了关于vue3中emit('update:modelValue')使用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
本文主要介绍了Vue结合leaflet实现克里金插值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了深入学习Vue nextTick的用法及原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
vue项目引入远程jweixin-1.2.0.js文件并使用详解
这篇文章主要介绍了vue项目引入远程jweixin-1.2.0.js文件并使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最近在做车辆模拟地图,在实现控制站点名称按需显示,下面通过本文给大家分享vue3实现模拟地图站点名称按需显示的功能,感兴趣的朋友跟随小编一起看看吧2024-06-06
浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定
这篇文章主要介绍了浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,需要的朋友可以参考下2022-12-12
在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,下面这篇文章主要给大家介绍了关于Vue前端书写规范的相关资料,需要的朋友可以参考下2023-01-01
最新评论