用Vue & Firebase 實作簡易購物網站 04.設計首頁頁面
Published in
Jun 21, 2020
※成品連結：vue-shop-3b5cc.web.app
04.設計首頁頁面
一、規劃首頁(Home.vue)內容
(一)程式碼
1.components資料夾->新增Header.vue、Banner.vue、Footer.vue
2.於Home.vue加上：
3.public資料夾->新增img資料夾->新增layout資料夾->新增圖檔：預備header.jpg、banner.jpg、footer.jpg圖片
4.Header.vue、Banner.vue、Footer.vue程式碼內容(內容可以自行設計)
(1)Header.vue
(2)Banner.vue
(3)Footer.vue
(二)參考資料
Programmatic Navigation官方文件：https://router.vuejs.org/zh/guide/essentials/navigation.html
1.router.replace 跟 router.push很類似，但router.replace不會向 history 新增新記錄，只是替換掉當前的 history 記錄。
2.使用 router.push 方法到不同的 URL，會向 history 添加一個新紀錄，所以當使用者點擊瀏覽器後按退回，會回到之前的 URL。
3.使用router.push(…)等同於調用<router-link :to=”…”>，而使用router.replace(…)等同於調用<router-link :to=”…” replace>。
