28、購物車結算頁面-導航欄與地址選擇佈局

摘要： 本章我們開始講 購物車結算頁面 的編寫，這個頁面應該是整個專案裡最複雜的頁面了，ok，這章講下基本結構。 Github： https://github.com/Ewall1106/mall （請選擇分支chapter28） 1、新建購物車頁面 （1）老規矩，複製一份我們已...

本章我們開始講 購物車結算頁面 的編寫，這個頁面應該是整個專案裡最複雜的頁面了，ok，這章講下基本結構。

Github： ofollow,noindex">https://github.com/Ewall1106/mall （請選擇分支chapter28）

1、新建購物車頁面

（1）老規矩，複製一份我們已經寫好的 test.vue 頁面初始化我們購物車頁面 cart.vue

（2）然後就是去註冊下路由

• 這裡就不廢話了佔據篇幅了，這個應該很easy了。

2、頂部導航欄

（1）頂部的第一個塊就是導航欄了，跟前面的一樣，沒什麼難點的了。

然後就是新增幾個前進後退的事件，我這裡就直接複製前面章節中商品詳情頁裡的頭部了，其實，這裡你也可以把部分抽離成一個元件從而實現複用，我就懶得抽了。

3、收貨地址塊

（1）重點說下 收貨地址 這部分內容的實現，首先快速寫下html和css完成基本佈局：

css就是一些簡單的 flex佈局 及 阿里巴巴icon-font的運用 ，不貼程式碼了。完成的基本效果：

（2）然後我們需要跳轉到一個新頁面完成地址選擇功能，所以我們再新建一個 address.vue 頁面

• 同上，複製一份我們test.vue重新命名為address作為我們的地址選擇頁面；
• 註冊路由

4、小結

這章就是完成了購物車結算頁面的部分佈局，下一章我們去 adress.vue 中藉助vant元件實現地址選擇功能，然後我們在返回到這個頁面來完成我們剩下的功能。