用Vue & Firebase 實作簡易購物網站06.設計會員中心分頁(Nested Routes)
Published in
Jun 23, 2020
※成品連結：vue-shop-3b5cc.web.app
06.設計會員中心分頁(Nested Routes)
一、規劃User.vue分頁(巢狀路由)
(一)程式碼
1.views資料夾->新增Profile.vue、Orders.vue、MProducts.vue，這三個檔案的用途：
(1)Profile.vue：會員修改會員資料頁面。
(2)Orders.vue：會員訂單總覽頁面(專案作品中尚未完成)。
(3)MProducts.vue：管理商品頁面，可新增修改刪除商品。之後會另外建立Admin.vue頁面，與一般使用者分開，現階段先建立在User.vue中。
2.public資料夾->img資料夾->layout資料夾->新增圖檔：預備profile.png、orders.jpg、products.jpg圖片
3.於router.js引入並配置路由
4.修改User.vue
(1)sidebar-menu區，用<router-link>連結子分頁
(2)page-content區，用<router-view>安排子分頁出現位置。
5.Profile.vue、Orders.vue、MProducts.vue程式碼內容(內容可以自行設計)：先大致排版確認分頁連結無誤，之後再增加內容。
(1)Profile.vue
(2)Orders.vue
(3)MProducts.vue
(二)參考資料
1.Nested Routes官方文件：
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
2.Named Views官方文件：
