---
# System prepended metadata

title: 第六週團隊任務 - VUE 班 6 組
tags: [vue 直播班 - 2022 冬季班]

---

---
tags: vue 直播班 - 2022 冬季班
---
# 第六週團隊任務 - VUE 班 6 組
> 討論日期及時間 > 2023/02/11 20:00-21:30
> 
**組員參與名單(06 / 10)：**
- [x] christina#6185
- [x] hungya#0773
- [x] yuyu#6310
- [x] Potatolee#7749
- [ ] Tuhacrt#0008
- [x] 灰塵貓#7994
- [x] Wei#2330
- [ ] Keith 宇凡#3890
- [ ] 阿仁#0914
- [ ] 阿鑫#4346

## 挑戰一：參考主流網站或學長姐作品，撰寫路由表

路由對於許多同學是相對比較陌生的，因此可以先從已經完成的網站著手，試著反推出該網站的路由表

製作範例：
- 尋找已經在線的網站，例如作品牆上的作品 https://works.hexschool.io/#/ ，或任何在運行中的商業網站
    - 範例作品：https://huan5678.github.io/chill-bar/#/
- 撰寫路由表，僅需要撰寫路徑及名稱，不需要搭配元件

```
const router = [
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '產品列表',
        path: '/products',
    },
    {
        name: '產品內頁',
        path: '/products/:id'
    },
    {
        name: '預約訂位',
        path: '/booking'
    }
]

```

盡可能使用到的技巧
1. 動態路由
2. 巢狀路由


答：

> https://wendy03.github.io/ec_coffee/#/
> 

```
const router = [
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '商品列表',
        path: '/products',
    },
    {
        name: '產品內頁',
        path: '/products/:id'
    },
    {
        name: '咖啡專欄',
        path: '/class'
    },
    {
        name: '追蹤商品',
        path: '/track'
    },
    {
        name: '購物車',
        path: '/cart'
    },
    {
        name: '訂單確認',
        path: '/order'
    },
    {
        name: '送出訂單',
        path: '/send'
    },
    {
        name: '付款',
        path: '/checkout/:id'
    },
    {
        name: '關於我們',
        path: '/about'
    },
    {
        name: '常見問題',
        path: '/information'
    }
] 

```





## 挑戰二

完成團隊挑戰：https://bejewled-air-4cb.notion.site/2f9d3306ae124bc19b54e8f4003b2c61

填寫表單：https://docs.google.com/spreadsheets/d/1GSMp6C4dLLY2r6unxh4tzb8l5aiUuh8shvNybE36Op4/edit?usp=sharing

答：



| 題目 | 答案 | 正解及備註 |
| -------- | -------- | -------- |
| 題目01     |   3  | --------  |
| 題目02     |   2  | --------  |
| 題目03     |   2  | --------  |
| 題目04     |   3  | --------  |
| 題目05     |  `<router-view> `   | --------  |
| 題目06     |  `<router-link>`   | --------  |
| 題目07     |  3   | --------  |
| 題目08     |  `'this.$router.push(`/product/${this.productId}`')`   | --------  |
| 題目09     |   `linkActiveClass`  | --------  |
| 題目10     |   2  | --------  |


#### 2. 關於 Vue Router，何者敘述錯誤？
![](https://i.imgur.com/f0FHStp.png)
> https://zhuanlan.zhihu.com/p/517626095



## 討論紀錄
![](https://i.imgur.com/YRsBn56.png)

![](https://i.imgur.com/v6gevps.png)

![](https://i.imgur.com/OvE0Iyf.png)






---
<!-- https://hackmd.io/91uyX4KDSLa7IOdLL1H5Tg?both -->

> 謝謝今天有參與的同學們 :100: 
> 
<iframe src="https://giphy.com/embed/VzGQrj8sLH4GLcSiG1" width="480" height="348" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/giphydiscovery-dogs-VzGQrj8sLH4GLcSiG1">via GIPHY</a></p>