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)
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element表单验证如何清除校验提示语

    element表单验证如何清除校验提示语

    本文主要介绍了element表单验证如何清除校验提示语,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue如何实现observer和watcher源码解析

    vue如何实现observer和watcher源码解析

    这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料,分析vue的observe实现源码,聊聊如何一步一步实现$watch,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue实现图片预览效果实例(放大、缩小、拖拽)

    Vue实现图片预览效果实例(放大、缩小、拖拽)

    现在项目中有这样的一个需求,对上传的图片可以点击之后在线预览,这篇文章主要给大家介绍了关于Vue实现图片预览效果实例(放大、缩小、拖拽)的相关资料,需要的朋友可以参考下
    2021-05-05
  • vue中的@click.native 原生点击事件

    vue中的@click.native 原生点击事件

    这篇文章主要介绍了vue中的@click.native 原生点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 卸载eslint方式

    vue 卸载eslint方式

    这篇文章主要介绍了vue 卸载eslint方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 浅谈vuepress 踩坑记

    浅谈vuepress 踩坑记

    本篇文章主要介绍了浅谈vuepress 踩坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue和relation-graph库打造高质量的关系图应用程序

    Vue和relation-graph库打造高质量的关系图应用程序

    这篇文章主要介绍了Vue和relation-graph库打造高质量的关系图应用程序,在这篇文章中,我们深入探讨了如何使用Vue和relation-graph高效打造关系图,我们详细介绍了数据准备、关系映射、点击事件等关键步骤,需要的朋友可以参考下
    2023-09-09
  • vue长按事件和点击事件冲突的解决

    vue长按事件和点击事件冲突的解决

    这篇文章主要介绍了vue长按事件和点击事件冲突的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue.js中computed的基本使用方法

    Vue.js中computed的基本使用方法

    Vue.js中,computed属性根据依赖进行缓存,只有依赖改变时才重新计算,这样有效提高性能,computed属性是响应式的,可以自动更新,并且默认是只读的,它与methods的主要区别在于计算属性具有缓存性,而方法每次调用都会执行,使用computed可以使模板更加简洁,提高应用性能
    2024-09-09
  • vue3.2新增指令v-memo的基本使用教程

    vue3.2新增指令v-memo的基本使用教程

    ue3.2新增了一个指令v-memo,引入这个指令的目的是帮助大家更好的为我们的应用做性能优化,下面这篇文章主要给大家介绍了关于vue3.2新增指令v-memo基本使用的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论