Vue全局布局組件的設計


設計全局布局組件,比如側邊欄,導航欄,標簽欄等。

在博思考試系統項目中,由於所有頁面都要用到公共的布局組件,所有將他們封裝起來,這里記錄一下用法。

 

 首先在router.js中設置相應的父級的組件。

 

 布局組件,Layout.vue

 

 這里需要注意的是子組件的內容需要在父組件中寫<router-view/>才能顯示。

 

 這里還有一個注意點

Vue會復用相同的組件, 將不在執行created, mounted之類的鈎子, 這時候就需要通過設置路由鈎子beforeRouteUpdate或者監聽$route的變化來執行相關方法更新數據。如果不想要復用組件,可以根據需要進行如下設置。

設置router-view 的key為$route.path
  • 從/user/foo => /user/bar, 由於這兩個路由的$route.path並不一樣, 所以組件被強制不復用,組件會執行created與 mounted中的內容。

  • 從/user?name=foo => /user?name=bar, 由於這兩個路由的$route.path一樣, 所以和沒設置 key 屬性一樣, 會復用組件。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM