組件復用會在兩種情況下發生：

1、使用 keep-alive 時，頁面再次跳轉時，數據不更新

每一次路由的切換都會導致頁面被重新渲染，無論是各種鉤子還是異步獲取數據函數都會被執行，為了提高網站性能，可以使用 keep-alive 包裹住 router-view，當路由的內容被加載過一次之后，就把內容放到內存中，下一次再進這個路由時，不需重新渲染這個頁面，直接從內存中將內容取出放到頁面中。

此時有兩種選擇可以處理組件復用時導致數據不刷新的問題：

1)如果一個頁面需要動態獲取數據的組件很多，那么就直接將此組件設置不實用 keep-alive 即可；

2)如果一個頁面只有一兩個組件需要動態獲取數據，那么就在 activated 鉤子中重新向后端獲取部分組件的數據，如果不是實時動態獲取數據，而只是在用戶有相關操作時需要獲取數組，那么可以結合一個公共的布爾變量來判斷是否需要重新獲取數據。那么這種方式又可以使用 keep-alive 來提高性能，又可以避免它帶來的問題。

2、同一組件，參數變化，頁面數據不更新的問題

比如說在詳情頁之間切換時，會導致不同詳情頁出現同一批數據的結果，這是 router-view 復用組件導致的問題。

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

可以先參考下 vue 項目是如何改變 router-view 的 key 的：vue刷新當前路由：router-view 復用組件時不刷新的3種解決方案總結

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

如果有查詢參數就使用 watchQuery 方案，否則可以使用其他兩種方式。當然也可以使用 watch 直接監聽路由的變化。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。