組件復(fù)用會(huì)在兩種情況下發(fā)生：

1、使用 keep-alive 時(shí)，頁(yè)面再次跳轉(zhuǎn)時(shí)，數(shù)據(jù)不更新

每一次路由的切換都會(huì)導(dǎo)致頁(yè)面被重新渲染，無(wú)論是各種鉤子還是異步獲取數(shù)據(jù)函數(shù)都會(huì)被執(zhí)行，為了提高網(wǎng)站性能，可以使用 keep-alive 包裹住 router-view，當(dāng)路由的內(nèi)容被加載過(guò)一次之后，就把內(nèi)容放到內(nèi)存中，下一次再進(jìn)這個(gè)路由時(shí)，不需重新渲染這個(gè)頁(yè)面，直接從內(nèi)存中將內(nèi)容取出放到頁(yè)面中。

此時(shí)有兩種選擇可以處理組件復(fù)用時(shí)導(dǎo)致數(shù)據(jù)不刷新的問(wèn)題：

1)如果一個(gè)頁(yè)面需要?jiǎng)討B(tài)獲取數(shù)據(jù)的組件很多，那么就直接將此組件設(shè)置不實(shí)用 keep-alive 即可；

2)如果一個(gè)頁(yè)面只有一兩個(gè)組件需要?jiǎng)討B(tài)獲取數(shù)據(jù)，那么就在 activated 鉤子中重新向后端獲取部分組件的數(shù)據(jù)，如果不是實(shí)時(shí)動(dòng)態(tài)獲取數(shù)據(jù)，而只是在用戶有相關(guān)操作時(shí)需要獲取數(shù)組，那么可以結(jié)合一個(gè)公共的布爾變量來(lái)判斷是否需要重新獲取數(shù)據(jù)。那么這種方式又可以使用 keep-alive 來(lái)提高性能，又可以避免它帶來(lái)的問(wèn)題。

2、同一組件，參數(shù)變化，頁(yè)面數(shù)據(jù)不更新的問(wèn)題

比如說(shuō)在詳情頁(yè)之間切換時(shí)，會(huì)導(dǎo)致不同詳情頁(yè)出現(xiàn)同一批數(shù)據(jù)的結(jié)果，這是 router-view 復(fù)用組件導(dǎo)致的問(wèn)題。

1)解決的基本思路就是改變 router-view 的內(nèi)部屬性 key

可以先參考下 vue 項(xiàng)目是如何改變 router-view 的 key 的：vue刷新當(dāng)前路由：router-view 復(fù)用組件時(shí)不刷新的3種解決方案總結(jié)

請(qǐng)將鏈接中的三種方式寫(xiě)到 layouts/default.vue 中，另外說(shuō)下 watchQuery 的用法，比如：http://localhost:3000?name=wang&number=123 這個(gè)例子中，watchQuery: true 是說(shuō)路由后面的所有查詢參數(shù)(包括 name 和 number)都被監(jiān)聽(tīng)了，watchQuery: ['name'] 的意思是只監(jiān)聽(tīng)了 name 這個(gè)查詢參數(shù)。

如果有查詢參數(shù)就使用 watchQuery 方案，否則可以使用其他兩種方式。當(dāng)然也可以使用 watch 直接監(jiān)聽(tīng)路由的變化。

總結(jié)

以上是生活随笔為你收集整理的nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。