當多個路由復用同一個模板,此時在這幾個路由間切換,模板並不會重新掛載。針對這個情況,我們需要在當前邏輯內對路由做監聽,在發生變化時更新對應屬性,已滿足需求。
但是,在實現的過程中會遇到如下情況:
如圖示,在頁面切換的時候轉入el-table的prop屬性已經發生了變化,但是內循環綁定的並沒有變化,原因是vue監聽不到深層次的對象屬性或者數組值的改變。
解決辦法就是在路由切換的時候,利用v-if指令綁定狀態的過度。此處假設v-if="view === 'main'"代表顯示,在切換的過程將view置為'loading', 然后延時更新置為'main', 這樣列表展示會經歷 "顯示=>消失=>顯示"的過程,列表組件會經歷" 掛載 =>銷毀=>掛載"的過程,使組件釋放緩存數據強制更新,這樣就符合了我們之前多頁面復用模板靈活配置屬性的設計。
此處記錄了我之前大概的解決思路,希望對各位有幫助。這個問題更多的考察我們對組件生命周期和屬性雙向綁定機制的一些理解。如有更多的想法、討論,請留言給我。謝謝