---
# System prepended metadata

title: Week6 小組任務 - 第九組
tags: [Vue 直播班 - 2022 冬季班]

---

---
title: Week6 小組任務 - 第九組
tags: Vue 直播班 - 2022 冬季班
---

## 討論截圖 

✔️ 
| 參與會議 | 組員      |
| -------- | --------- |
|          | WeiJ      |
|          | RJRS      |
|          | 橘子      |
|          | Hironaka  |
|          | shinyhung |
|          | DIO大人   |
|          | avan      |
|          | Rita916   |
|          | SASIMI    |
|          | Hazel.    |


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

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

製作範例：
- 尋找已經在線的網站，例如作品牆上的作品 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. 巢狀路由


WeiJ     
https://listennn08.github.io/GAGU-Shop
```
const router = [
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '關於我們',
        path: '/about',
    },
    {
        name: '產品列表',
        path: '/products/'
    },
    {
        name: '產品內頁',
        path: '/products/:id'
    },
    {
        name: '登入',
        path: '/login'
    },
    {
        name: '購物車',
        path: '/shopcart'
    },
    {
        name: '我的訂單',
        path: '/orders'
    },
]
```
```
RJRS     
```
```
橘子     
```
```
Hironaka 
```

shinyhung
https://vince-chen-hao.github.io/LifeHouse_Shop
```
const router = [
    {
        name: '品牌首頁',
        path: '/'
    },
    {
        name: '購物市集',
        path: '/product_list',
    },
     {
        name: '產品內頁',
        path: '/product_detail/id',
    },
    {
        name: '優惠活動',
        path: '/coupon_page/'
    },
    {
        name: '門市資訊',
        path: '/contact_page/'
    },
    {
        name: '訂單管理/登入',
        path: '/login'
    },
    {
        name: '購物車結帳頁面',
        path: '/order_check'
    },
    {
        name: '我的訂單',
        path: '/client_info'
    },
]
```
DIO大人   
```
```
avan     
```
```
Rita916  
```
```
SASIMI   
https://overactive1988.github.io/littlewitchnobeta/#/
```
const router = [
    {
        name: '首頁',
        path: '/'
    },
    {
        name: '商品列表',
        path: '/products',
    },
    {
        name: '商品明細',
        path: '/product/:id'
    },
    {
        name: '最新消息',
        path: '/articles'
    },
    {
        name: '關於諾貝塔',
        path: '/about'
    },
    {
        name: '確認購物車',
        path: '/cart'
    },
    {
        name: '填寫訂單',
        path: '/cartcheck'
    },
    {
        name: '確認訂單內容',
        path: '/cartconfirm'
    },
    {
        name: '完成下訂',
        path: '/cartpayment/:id'
    },
    {
        name: '完成付款'
        path: '/cartcompleted/:id'
    }
]
```
Hazel.   
```
```

## 挑戰二

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

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


WeiJ     
```
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
```
RJRS     
```
```
橘子     
```
```
Hironaka 
```
```
shinyhung
```
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    
```
DIO大人   
```
```
avan     
```
```
Rita916  
```
```
SASIMI   
```
1. 3
2. 2
3. 2
4. 3
5. <router-view/>
6. <router-link></router-link>
7. 3
8. this.$router.push(`/product/${this.productId}`)
9. linkActiveClass
10. 2
```
Hazel.   
```
```
