---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 37
###### tags: `Vue 直播班 - 2022 春季班`

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/rider159159/pen/gOmXZXE)，執行以下要求 (只能操作 JS 的部分):

> 練習 `pageTwo/:id` 動態路由
> - 參考課程教學，在 routes 中，以動態路由方式，建立 pageTwo 相關設定。
> - 讓使用者點擊 2 時，router-view 會顯示「第二頁 / 路由 id: 1235」文字，詳細狀況如圖:
> - 本次練習主要是讓同學理解 `pageTwo/:id` 動態路由的使用。

動態路由設置可參考: https://courses.hexschool.com/courses/vue-20212/lectures/35988933

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/pageOne',
component: pageOne
},
{
path: '/pageTwo/:id',
component: pageTwo
}
]
})
-->

回報區
---
| 報數 | 組別-名字 | codepen / 其他回饋 |
|:--------:| :--------: | :--------: |
|1|Aaron Tu|https://codepen.io/aarontu/pen/LYOmjBV|
|2| Larry | https://codepen.io/larrylinr5/pen/bGYMrMY?editors=1011 |
|3| Iris Hunag | https://codepen.io/ythuang/pen/GROdvLE |
|4|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/zYPjdqM|
|5| 黃士桓 | https://codepen.io/shr-huan-huang/pen/GROdMRM |
|6| Jason Chen | https://codepen.io/jason60810/pen/MWOGvNx |
|7| 肉鬆 | https://codepen.io/klrkicog/pen/vYWjeOZ?editors=1010 |
|8| Gill | https://codepen.io/Gill-Chin/pen/podVWrX?editors=1011 |
|9|威爾|https://codepen.io/WILL_Wu/pen/GROdMEx|
|10|Yunei|https://codepen.io/Yunei/pen/bGYMoJy|
|11| Sheep | https://codepen.io/SheepNDW/pen/LYOmzoe |
|12| PeiYing | https://codepen.io/Pei-Ying/pen/WNXJXVp?editors=1011 |
|13| Arista | https://codepen.io/arista-hsieh/pen/WNXJdEX |
|14| 陳暐中 | https://codepen.io/wei-z/pen/oNodEvL?editors=1010 |
|15|YC|https://codepen.io/YCLu/pen/oNodEbY |
|16|POPEYE|https://codepen.io/popeye_ux/pen/XWzqZGN|
|17|EmptyWu|https://codepen.io/emptywu/pen/rNYvJdx |
|18|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/VwrxXXg?editors=1111 |
|19|shio|https://codepen.io/shioyen/pen/XWzqyrp |
|20|我是泇吟|https://codepen.io/kljuqbxs/pen/MWOGzVm|
|21|tingyu| https://codepen.io/dgltu/pen/zYPjbKz?editors=1011 |
|22|Charlotte Lee| https://codepen.io/charlotte-lee/pen/rNYvRMy?editors=1010 |
|23|Himi|https://codepen.io/Himi/pen/eYerwNd|
|24|Wenfish|https://codepen.io/wenfisht/pen/abVKBPm|
|25|Jasper|https://codepen.io/li-jasper/pen/eYeKgmZ |
|26|Rick Tzeng|https://codepen.io/rick917jp6/pen/vYWjVqr |
|27|kk|https://codepen.io/potatokaka/pen/XWzYRjv?editors=1010|
|28|Tim Lin|https://codepen.io/TimmyLin/pen/ExbRvPp|
|29|Terry21|https://codepen.io/feng0409/pen/RwjJLpg?editors=1010 |
|30| andersonshen | https://codepen.io/luxyenni-the-bold/pen/oNoyGRe |
|31| sally | https://codepen.io/intelligence753/pen/gOXKKMx?editors=1010 |
|32|Calon|https://codepen.io/Calon0118/pen/GROGBWw|
|33|咖咖|https://codepen.io/gon790219/pen/dyZKqqy |
|34|kevinhes|https://codepen.io/kevinhes/pen/BamPyJz?editors=1010|
|35|Bruno Yu|https://codepen.io/bruno-yu/pen/BamVPxX?editors=1111|
|36|ZY Hsu|https://codepen.io/zihyin/pen/MWOqwBL?editors=1011|
|37| Otis | https://codepen.io/humming74/pen/NWwLXMN?editors=1010 |
|38| mei | https://codepen.io/Shila-Chen/pen/OJOaXqE |
|39|Judy☻ | https://codepen.io/hsiaohan/pen/QWOzVGz |
|40|Bonnie | https://codepen.io/bonnieli1414/pen/RwjEvqz |
|41| 紙飛機 | https://codepen.io/paperplanea/pen/VwrJvyd |
| 42 | sihle | https://codepen.io/bugbug777/pen/XWVWNwo |
|43|Mylène|https://codepen.io/hamajibashi/pen/QWadYPM|
|44|Gui|https://codepen.io/guitimliu/pen/oNpmEvm
|45|大衛|https://codepen.io/exnsrpjc/pen/xxpeqVE |
|46|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/eYVOENM |