快捷導(dǎo)航

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

更新時(shí)間：2024年03月01日 14:42:52 作者：小秀_heo

這篇文章主要介紹了Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

方案一：給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í)行的鉤子，所以只能通過 to 來獲取即將到達(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í)候，可以把分類數(shù)據(jù)接口重新發(fā)送
onBeforeRouteUpdate((to)=> {
  getCategory(to.params.id)
})

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue懶加載和子組件懶加載的區(qū)別詳解
這篇文章主要給大家介紹了vue懶加載和子組件懶加載有什么區(qū)別,Vue懶加載指的是對(duì)圖片等資源的延遲加載,而子組件懶加載則是指延遲加載組件實(shí)例,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-09-09
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
深入學(xué)習(xí)Vue nextTick的用法及原理
這篇文章主要介紹了深入學(xué)習(xí)Vue nextTick的用法及原理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用詳解
這篇文章主要介紹了vue項(xiàng)目引入遠(yuǎn)程jweixin-1.2.0.js文件并使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
利用Vue+intro.js實(shí)現(xiàn)頁面新手引導(dǎo)流程功能
在同學(xué)們使用某些網(wǎng)站的新版本頁面的時(shí)候,經(jīng)常會(huì)出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果,來幫助同學(xué)們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實(shí)現(xiàn)頁面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下
2023-11-11
vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
vue3實(shí)現(xiàn)模擬地圖站點(diǎn)名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實(shí)現(xiàn)控制站點(diǎn)名稱按需顯示,下面通過本文給大家分享vue3實(shí)現(xiàn)模擬地圖站點(diǎn)名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧
2024-06-06
淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下
2022-12-12
Vue前端書寫規(guī)范大全(非常詳細(xì)!)
在團(tuán)體開發(fā)項(xiàng)目中,為了團(tuán)隊(duì)所有成員書寫可維護(hù)的代碼,而不是一次性的代碼,讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關(guān)于Vue前端書寫規(guī)范的相關(guān)資料,需要的朋友可以參考下
2023-01-01