【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)
})
相关推荐
刘九灵1 小时前
Redis ⽀持哪⼏种数据类型?适⽤场景,底层结构
redis·缓存
煎饼小狗10 小时前
Redis五大基本类型——Zset有序集合命令详解(命令用法详解+思维导图详解)
数据库·redis·缓存
雯0609~12 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
菠萝咕噜肉i14 小时前
超详细:Redis分布式锁
数据库·redis·分布式·缓存·分布式锁
只因在人海中多看了你一眼17 小时前
分布式缓存 + 数据存储 + 消息队列知识体系
分布式·缓存
Dlwyz18 小时前
redis-击穿、穿透、雪崩
数据库·redis·缓存
Oak Zhang1 天前
sharding-jdbc自定义分片算法,表对应关系存储在mysql中,缓存到redis或者本地
redis·mysql·缓存
门牙咬脆骨1 天前
【Redis】redis缓存击穿,缓存雪崩,缓存穿透
数据库·redis·缓存
门牙咬脆骨1 天前
【Redis】GEO数据结构
数据库·redis·缓存
Dlwyz1 天前
问题: redis-高并发场景下如何保证缓存数据与数据库的最终一致性
数据库·redis·缓存