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