---
# System prepended metadata

title: 第六週小組任務
tags: [每週小組任務]

---

#  第六週小組任務
###### tags: `每週小組任務`!

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

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

製作範例：
- 尋找已經在線的網站，例如作品牆上的作品 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://i.imgur.com/RJyTy3M.png)



## 挑戰二

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

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

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

|題號|答案回答|解答 & 備註|
|-|---|---|
|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|||