欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化)

 更新時(shí)間：2024年03月01日 14:42:52   作者：小秀_heo  
這篇文章主要介紹了Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

官方文檔解釋?zhuān)?/strong>

解決問(wèn)題的思路：

  • 讓組件實(shí)例不復(fù)用,強(qiáng)制銷(xiāo)毀重建
  • 監(jiān)聽(tīng)路由變化,變化之后執(zhí)行數(shù)據(jù)更新操作

方案一：給router-view添加key

以當(dāng)前路由完整路徑為key 的值，給router-view組件綁定

<RouterView :key="$route.fullPath" />

所以添加 key之后會(huì)強(qiáng)制替換組件，重新發(fā)送所有請(qǐng)求（某些情況下不需要重新發(fā)送所有請(qǐng)求，會(huì)造成性能浪費(fèi)），而非復(fù)用。

方案二：使用 beforeRouteUpdate 導(dǎo)航鉤子

beforeRouteUpdate 鉤子函數(shù)可以在每次路由更新之前執(zhí)行，在回調(diào)中執(zhí)行需要數(shù)據(jù)更新的業(yè)務(wù)邏輯即可。

這里只需要 getCategory 重新請(qǐng)求，而 getBanner 不重新請(qǐng)求。

注意點(diǎn)：

  • 這里 id 會(huì)變化，不傳入則使用 默認(rèn)id，使用 to 的目的在于獲取將要到達(dá)路由的 params參數(shù)。
  • 又因?yàn)?onBeforeRouteUpdate 是在跳轉(zhuǎn)之前就執(zhí)行的鉤子，所以只能通過(guò) to 來(lái)獲取即將到達(dá)的路由的參數(shù)。
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()
})

// 路由參數(shù)變化的時(shí)候，可以把分類(lèi)數(shù)據(jù)接口重新發(fā)送
onBeforeRouteUpdate((to)=> {
  getCategory(to.params.id)
})

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論