---
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://zhuanlan.zhihu.com/p/517626095
## 討論紀錄



---
<!-- 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>