Vue多個元件對映到同一個元件,頁面不重新整理？

摘要： 在做專案的過程中,有這麼一個場景：多個元件通過配置路由,都跳轉到同一個元件,他們之間的區別就是,傳入的引數不同.請看router 物件： userCenterLike: { name: 'user-center', ...

在做專案的過程中,有這麼一個場景：多個元件通過配置路由,都跳轉到同一個元件,他們之間的區別就是,傳入的引數不同.請看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);
}
 }
複製程式碼

這樣就可以在路由變化的同時,將我們的引數傳入,實現頁面的資料重新整理.