---
title: 第六週小組任務 - 第三組
tags: Vue直播班 - 2022 冬季班
---
###### tags: `2022 Vue直播班` `冬季班` `六角學院`

# 第六週小組任務 - 第三組
:arrow_backward: [回到目錄](https://hackmd.io/zEo77jAnSH-C9q1ADR-i4Q)
:heavy_check_mark:

||組員名單|簽到|
|-|---|---|
|1| albee#9121 |:heavy_check_mark:|
|2| Amberhh#2465 |:heavy_check_mark:|
|3| 艸良#2846 |請假|
|4| bakiii#2652 |請假|
|5| hannahTW#2224 |請假|
|6| Asher Xu#9297 |:heavy_check_mark:|
|7| RT#2151 |:heavy_check_mark:|
|8| leoli#3882 |:heavy_check_mark:|
|9| Eason#7884 |:heavy_check_mark:|
|10| Fannie#7800 |請假|

### 討論工具: Discode
- 時間:每周二晚間 8:00
- 截圖

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

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

製作範例：
- 尋找已經在線的網站，例如作品牆上的作品 https://works.hexschool.io/#/ ，或任何在運行中的商業網站
- 範例作品：https://huan5678.github.io/chill-bar/#/
- 撰寫路由表，僅需要撰寫路徑及名稱，不需要搭配元件

---

參考作品 : https://jedchang.github.io/ClocksStore/#/



const router = [
    {
        name: 'HOME',
        path: '/'
    },
    {
        name: 'ABOUT',
        path: '/about'
    },
    {
        name: 'WATCHS',
        path: '/watchs'
    },
    {
        name: 'FAQ',
        path: '/FAQ'
    },
    {
        name: 'CONTECT',
        path: '/contect'
    },
    {
        name: 'WATCHS'
        path: '/watchs/:id',
    },
    {
        name: 'WISHLISTS',
        path: '/wishLists'
    },
    {
        name: 'Cart,
        path: '/cart'
    },
    {
        name: 'ADMIN',
        path: '/admin'
    },
    {
        name: 'Order,
        path: '/order'
    },
    {
        name: 'checkout',
        path: '/checkout/:id'
    },
    {
        name: 'admin',
        path: '/admin',
        children: [   //巢狀路由
      {
        name: 'coupons',
        path: 'coupons',
      },
      {
        name: 'orders',
        path: 'orders',
      },
      {
        name: 'products',
        path: 'products',
      },
    ]
  }
]

盡可能使用到的技巧
1. 動態路由
2. 巢狀路由

## 挑戰二

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

|題目|回答|正確答案|
|-|---|---|
|1| 3 | |
|2| 2 | |
|3| 2 | |
|4| 3 | |
|5| <router-view> | |
|6| <router-link> | |
|7| 3 | |
|8|`this.$router.push('/product/${productId}')` | |
|9| linkActiveClass | |
|10| 2 | |

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