Vue多個元件對映到同一個元件,頁面不重新整理?
在做專案的過程中,有這麼一個場景:多個元件通過配置路由,都跳轉到同一個元件,他們之間的區別就是,傳入的引數不同.請看router
物件:
userCenterLike: { name: 'user-center', params: { index: 0 } }, userCenterHistory: { name: 'user-center', params: { index: 1 } } 複製程式碼
僅僅只是傳入的index的值不同.但是在檢視效果的過程中我發現:目標元件'user-center'始終只渲染一次,也就是說,第二次訪問到同一路由的時候,Vue那些生命週期的鉤子已經沒有用了,根本無法通過this.$route.params.index
來獲取引數.
解決方法
Vue的官網已經給出了詳細解釋:
提醒一下,當使用路由引數時,例如從/user/foo
導航到/user/bar
,原來的元件例項會被複用.因為兩個路由都渲染同個元件,比起銷燬再建立,複用則顯得更加高效.不過,這也意味著元件的生命週期鉤子不會再被呼叫
也就是說,一開始Vue就是這樣設計的,為了節省每次都要重建頁面的記憶體開銷,所以就複用.那麼如何解決呢?
在這裡,我們可以通過監聽路由的變化來獲取引數並進行操作,在watch
鉤子裡面:
'$route'(to,from){ if (this.$route.params.index !== 'undefined') { console.log(this.$route.params.index); } } 複製程式碼
這樣就可以在路由變化的同時,將我們的引數傳入,實現頁面的資料重新整理.