# 第六週團隊任務

###### 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://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 | |