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