# 🏅 Day 37 - 練習建置 動態路由

觀看課程影音「透過參數決定路由內容 - 動態路由」後，練習下方題目。

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/yLqQwZy)，執行以下要求（只能操作 JS 的部分）：

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

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/pageOne',
component: pageOne
},
{
path: '/pageTwo/:id',
component: pageTwo
}
]
})
https://codepen.io/jmimiding4104/pen/xxBpbvN?editors=1010

額外挑戰：
https://codepen.io/jmimiding4104/pen/zYbpxVe?editors=1111
-->

回報區
---

| Discord | CodePen / 答案 |
|:--------------:|:------------------------------------------------------------------:|
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/RwdJBqo) |
| py | [CodePen](https://codepen.io/Wpypy/pen/RwdJYyQ?editors=1011) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/rNRKogL) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/NWJmGWw?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/JjzVYyd?editors=1010) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/mdogeNX?editors=1010)|
|wei_Rio|[Codepen](https://codepen.io/wei_wu/pen/vYPMLQQ?editors=1010)|
| Eden | [Codepen](https://codepen.io/iseden/pen/BabEjPg)|
| Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/wvOZMZv)|
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/MWxRyXQ) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/poYBEpj?editors=1011) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/mdogOKJ?editors=1010) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/oNVOjrW) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/eYXoWoL) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/wvOZeXj) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/LYavjqm?editors=1111) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/VwRNmGZ?editors=1010) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/RwdOMjK?editors=1011) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/LYavrPr) |
| Ting | [CodePen](https://codepen.io/liara/pen/xxBeaop) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/QWoPZpK) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/BabEvWG?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/gOEyVqq) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/YzgbXZB) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/gOEJmjB) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/dyrEzMv) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/NWJZxqM) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/BabgxPP) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/bGZPXmx) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/JjVPpER) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/BaEBxXY)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/qBwEapg?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/jORrOBa) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/OJGgMrP) |

<!--

| user | [CodePen]() |

-->