---
# System prepended metadata

title: 第六週團隊任務
tags: [Vue直播班]

---

# 第六週團隊任務

###### tags: `Vue直播班`

### 小組討論
* 會議時間：每週一20:00討論
* 會議方式：使用Discord語音討論、文字紀錄
* 參與人員：共 Ｘ 名。
### 組員簽到處

| No. | Name | 簽到               |
| --- | --------   | ------------------|
|  1  | 米米＃1824     | :heavy_check_mark: |
|  2  | PeihanWang#2530     |  |
|  3  | NathanJames#8120     |  |
|  4  | Ringo#7583     | :heavy_check_mark: |


### 本次討論紀錄：
![](https://i.imgur.com/ef95Kba.png)
![](https://i.imgur.com/8wep2dB.png)
![](https://i.imgur.com/mUCbM4v.png)
![](https://i.imgur.com/JCw7UaU.png)


---

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

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

製作範例：
- 尋找已經在線的網站，例如作品牆上的作品 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://zihyinhsu.github.io/si-yueh/#/

```
const router = [
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '產品列表',
        path: '/search',
    },
    {
        name: '產品內頁',
        path: '/product/:id'
    },
    {
        name: '收藏書單',
        path: '/bcollection'
    },
    {
        name: '購物車',
        path: '/checkorder'
    },
    {
        name: '確認付款',
        path: '/checkout/:id'
    },
    {
        name: '付款完成',
        path: '/payment'
    },
    {
        name: '搜尋訂單',
        path: '/ordersearch'
    },
]

```


## 挑戰二

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

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


| 題數 | 答案 | 說明 |
| --- | --- | ---------- |
| 1 | 3 |   |
| 2 | 2 |  |
| 3 | 2 |  |
| 4 | 3 |  |
| 5 | <router-view> |  |
| 6 | <router-link> |  |
| 7 | 3 |  |
| 8 | this.$router.push(/product/${this.productId}) |  |
| 9 | linkActiveClass |  |
| 10 |2 |  |











