快捷導(dǎo)航

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

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

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

方案一：給router-view添加key

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

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

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

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

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

這里只需要 getCategory 重新請求，而 getBanner 不重新請求。

注意點：

這里 id 會變化，不傳入則使用默認id，使用 to 的目的在于獲取將要到達路由的 params參數(shù)。
又因為 onBeforeRouteUpdate 是在跳轉(zhuǎn)之前就執(zhí)行的鉤子，所以只能通過 to 來獲取即將到達的路由的參數(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ù)據(jù)接口重新發(fā)送
onBeforeRouteUpdate((to)=> {
  getCategory(to.params.id)
})

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vite打包出現(xiàn)?"default"?is?not?exported?by?"
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)?"default"?is?not?exported?by?"node_modules/...問題的解決辦法,文中通過代碼將解決的辦法介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考借鑒價值,需要的朋友可以參考下
2024-06-06
新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法
這篇文章主要介紹了新版vue-cli模板下本地開發(fā)環(huán)境使用node服務(wù)器跨域的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
關(guān)于Vue的 watch、computed和methods的區(qū)別匯總
這篇文章主要介紹關(guān)于Vue的 watch、computed和methods的區(qū)別，下面文章將圍繞Vue的 watch、computed和methods的續(xù)航管資料展開全文它們之間區(qū)別的內(nèi)容,需要的朋友可以參考一下，希望能幫助到大家
2021-11-11
Vue中的生命周期詳細解讀
這篇文章主要介紹了Vue中的生命周期詳細解讀,每個 Vue 組件實例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實例到 DOM，以及在數(shù)據(jù)改變時更新 DOM,需要的朋友可以參考下
2023-08-08
vue如何在style標簽中使用變量(數(shù)據(jù))詳解
在我們編寫css樣式中是不能直接使用vue data中的變量的,下面這篇文章主要給大家介紹了關(guān)于vue如何在style標簽中使用變量(數(shù)據(jù))的相關(guān)資料,需要的朋友可以參考下
2022-09-09
VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決
這篇文章主要介紹了VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue實例創(chuàng)建和掛載的詳細過程
在 Vue.js 中,實例的掛載是一個非常重要的過程,它決定了 Vue 實例如何與 DOM 進行交互,通過分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過程的詳細步驟,需要的朋友可以參考下
2024-11-11
vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例
今天小編就為大家分享一篇vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下
2018-12-12
vue js秒轉(zhuǎn)天數(shù)小時分鐘秒的實例代碼
這篇文章主要介紹了vue js秒轉(zhuǎn)天數(shù)小時分鐘秒的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08