問題

在做項目的過程中,有這么一個場景：多個組件通過配置路由,都跳轉到同一個組件,他們之間的區別就是,傳入的參數不同.請看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);}} 復制代碼

這樣就可以在路由變化的同時,將我們的參數傳入,實現頁面的數據刷新.

轉載于:https://juejin.im/post/5cbadfb76fb9a0688e067921

總結

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

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