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) })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue2中Print.js的使用超详细讲解(pdf、html、json、image)
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用(pdf、html、json、image)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03vue之el-upload使用FormData多文件同时上传问题
这篇文章主要介绍了vue之el-upload使用FormData多文件同时上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05解决vue3+vite配置unplugin-vue-component找不到Vant组件
这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论