用Vue & Firebase 實作簡易購物網站06.設計會員中心分頁(Nested Routes)
※成品連結: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官方文件: