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

总结

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

您可能感兴趣的文章:

vite打包出现 "default" is not exported by "
这篇文章主要给大家介绍了关于vite打包出现 "default" is not exported by "node_modules/...问题的解决办法,文中通过代码将解决的办法介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考借鉴价值,需要的朋友可以参考下
2024-06-06
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
关于Vue的 watch、computed和methods的区别汇总
这篇文章主要介绍关于Vue的 watch、computed和methods的区别，下面文章将围绕Vue的 watch、computed和methods的续航管资料展开全文它们之间区别的内容,需要的朋友可以参考一下，希望能帮助到大家
2021-11-11
Vue中的生命周期详细解读
这篇文章主要介绍了Vue中的生命周期详细解读,每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM,需要的朋友可以参考下
2023-08-08
vue如何在style标签中使用变量(数据)详解
在我们编写css样式中是不能直接使用vue data中的变量的,下面这篇文章主要给大家介绍了关于vue如何在style标签中使用变量(数据)的相关资料,需要的朋友可以参考下
2022-09-09
VueCli生产环境打包部署跨域失败的解决
这篇文章主要介绍了VueCli生产环境打包部署跨域失败的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue实例创建和挂载的详细过程
在 Vue.js 中,实例的挂载是一个非常重要的过程,它决定了 Vue 实例如何与 DOM 进行交互,通过分析 Vue 源码,特别是 Vue 的构建函数和生命周期,我们可以了解挂载过程的详细步骤,需要的朋友可以参考下
2024-11-11
vue封装可复用组件confirm,并绑定在vue原型上的示例
今天小编就为大家分享一篇vue封装可复用组件confirm,并绑定在vue原型上的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
浅析Vue.js中v-bind v-model的使用和区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下
2018-12-12
vue js秒转天数小时分钟秒的实例代码
这篇文章主要介绍了vue js秒转天数小时分钟秒的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08