【Vue3】解决路由缓存问题(响应路由参数的变化)

官方文档解释:

解决问题的思路:

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

方案一:给router-view添加key

以当前路由完整路径为key 的值,给router-view组件绑定

复制代码
<RouterView :key="$route.fullPath" />

所以添加 key之后会强制替换组件,重新发送所有请求(某些情况下不需要重新发送所有请求,会造成性能浪费),而非复用。

方案二:使用 beforeRouteUpdate 导航钩子

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

这里只需要 getCategory 重新请求,而 getBanner 不重新请求。

注意点:这里 id 会变化,不传入则使用 默认id,使用 to 的目的在于获取将要到达路由的 params参数。又因为 onBeforeRouteUpdate 是在跳转之前就执行的钩子,所以只能通过 to 来获取即将到达的路由的参数。

js 复制代码
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)
})
相关推荐
你不是我我21 小时前
【Java 开发日记】MySQL 与 Redis 如何保证双写一致性?
数据库·redis·缓存
Jeled21 小时前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
RoboWizard1 天前
扩容刚需 金士顿新款Canvas Plus存储卡
java·spring·缓存·电脑·金士顿
学无止境w1 天前
高并发系统架构设计原则:无状态、水平扩展、异步化、缓存优先
缓存·系统架构
qqxhb1 天前
系统架构设计师备考第45天——软件架构演化评估方法和维护
分布式·缓存·系统架构·集群·cdn·单体·已知未知评估
长安城没有风1 天前
从入门到精通【Redis】Redis 典型应⽤ --- 缓存 (cache)
数据库·redis·后端·缓存
骇客野人1 天前
【软考备考】软件架构设计需要考虑系统性能 如何使用缓存提高系统性能知识点七
缓存
学无止境w1 天前
Redis在电商中的深度应用:商品缓存、秒杀锁、排行榜的实现与避坑指南
数据库·redis·缓存
Tony Bai1 天前
释放 Go 的极限潜能:CPU 缓存友好的数据结构设计指南
开发语言·后端·缓存·golang
象象翔1 天前
Redis实战篇---添加缓存(店铺类型添加缓存需求)
数据库·redis·缓存