問題

在做項目的過程中,有這么一個場景：多個組件通過配置路由,都跳轉(zhuǎn)到同一個組件,他們之間的區(qū)別就是,傳入的參數(shù)不同.請看router對象：

userCenterLike: {name: 'user-center',params: {index: 0}},userCenterHistory: {name: 'user-center',params: {index: 1}}復(fù)制代碼

僅僅只是傳入的index的值不同.但是在查看效果的過程中我發(fā)現(xiàn)：目標組件'user-center'始終只渲染一次,也就是說,第二次訪問到同一路由的時候,Vue那些生命周期的鉤子已經(jīng)沒有用了,根本無法通過this.$route.params.index來獲取參數(shù).

解決方法

Vue的官網(wǎng)已經(jīng)給出了詳細解釋：

提醒一下,當使用路由參數(shù)時,例如從 /user/foo 導(dǎo)航到 /user/bar,原來的組件實例會被復(fù)用.因為兩個路由都渲染同個組件,比起銷毀再創(chuàng)建,復(fù)用則顯得更加高效.不過,這也意味著組件的生命周期鉤子不會再被調(diào)用

也就是說,一開始Vue就是這樣設(shè)計的,為了節(jié)省每次都要重建頁面的內(nèi)存開銷,所以就復(fù)用.那么如何解決呢？

在這里,我們可以通過監(jiān)聽路由的變化來獲取參數(shù)并進行操作,在watch鉤子里面：

'$route'(to,from){if (this.$route.params.index !== 'undefined') {console.log(this.$route.params.index);}} 復(fù)制代碼

這樣就可以在路由變化的同時,將我們的參數(shù)傳入,實現(xiàn)頁面的數(shù)據(jù)刷新.

轉(zhuǎn)載于:https://juejin.im/post/5cbadfb76fb9a0688e067921

總結(jié)

以上是生活随笔為你收集整理的Vue多个组件映射到同一个组件,页面不刷新？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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