設計全局布局組件,比如側邊欄,導航欄,標簽欄等。
在博思考試系統項目中,由於所有頁面都要用到公共的布局組件,所有將他們封裝起來,這里記錄一下用法。
首先在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 屬性一樣, 會復用組件。