---
# System prepended metadata

title: "\U0001F3C5 Day 37 - 練習建置 動態路由"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 37 - 練習建置 動態路由

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

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

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


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

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




回報區
---


|    Discord     |                           CodePen / 答案                           |
|:--------------:|:------------------------------------------------------------------:|
|   Wendy#5615   |         [Codepen](https://codepen.io/wendy03/pen/wvEvwqr)          |
|   冬天#5215    |         [CodePen](https://codepen.io/winter_/pen/ababoye)          |
| LinaChen#1796  |         [CodePen](https://codepen.io/LinaChen/pen/mdGdbBR)         |
|   yuyu#6310    |  [CodePen](https://codepen.io/yuyu0905/pen/zYJYOpV?editors=1010)   |
|    威0#6919    |       [codepen](https://codepen.io/n0918679182/pen/poOozLx)        |
|  AuroraC#6539  |         [codepen](https://codepen.io/AuroraC/pen/WNgNegy)          |
|   無名#6427    |         [Codepen](https://codepen.io/Nomoney/pen/ExeYNwY)          |
|   JackC#0411   |         [Codepen](https://codepen.io/key0329/pen/XWPWrwW)          |
|   威爾#1694    |         [CodePen](https://codepen.io/WILL_Wu/pen/JjajPqX)          |
|   albee#9121   |       [Codepen](https://codepen.io/albee-chang/pen/jOvONjX)        |
|   薯餅#3581    |      [CodePen](https://codepen.io/ColdingPoTaTo/pen/rNZNNNN)       |
|   azami#5986   |          [Codepen](https://codepen.io/azami/pen/ababbjW)           |
| mandylai#4055  | [Codepen](https://codepen.io/mandy-lai-2/pen/YzOzzqr?editors=1011) |
|  Benson#6763   |         [Codepen](https://codepen.io/kumashow/pen/vYzYYar)         |
|   Rena#6249    |       [Codepen](https://codepen.io/aureate0116/pen/LYJYEpr)        |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/xxaxbZY?editors=1010)  |
|    int#7518    |  [Codepen](https://codepen.io/intHuang/pen/GRXRgja?editors=1010)   |
|  楊苡安#2752   |        [Codepen](https://codepen.io/yi-an-yang/pen/dyqyPqL)        |
|   ㄚ翔#8126    |     [codepen](https://codepen.io/engineerjohnson/pen/QWVWbWq)      |
|  法希娜#3206   |   [codepen](https://codepen.io/yiiserpf-the-encoder/pen/BaOaojP)   |
|   泊岸#3466    | [codepen](https://codepen.io/qoq77416416/pen/GRXRpmd?editors=1010) |
| Rainliao#2616  |        [codepen](https://codepen.io/billpop741/pen/MWqWawN)        |
|   Alex#9978    |  [codepen](https://codepen.io/datsxzqg-the-selector/pen/wvEvGeq)   |
| Jill Lee#0809  |       [codePen](https://codepen.io/chi-ling-lee/pen/zYJYBmN)       |
| masterYan#2480 |   [codePen](https://codepen.io/htzwgoqt-the-looper/pen/MWqWjvm)    |
|  Tuhacrt#0008  |         [codepen](https://codepen.io/Tuhacrt/pen/dyqypwE)          |
|  SASIMI#5099   |       [Codepen](https://codepen.io/sashimi1327/pen/dyqbmge)        |
|   圈圈#4060    |    [Codepen](https://codepen.io/wjejfczn-the-bold/pen/dyqyvXq)     |
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/BaOaWro)|
|Austyn#0949|[Codepen](https://codepen.io/fish90547/pen/YzOzxQB)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/wvEvrLm)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/mdGdqyB?editors=1011)|
hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/VwGwrMM?editors=1011)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/yLxLRVK) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/oNPNaOx) |
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/XWPWOWY)|
|DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/dyqyaeo)|
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/OJoPymZ)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/xxabjJY)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/abazXxr?editors=1010)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/dyqPLXJ)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/ZEMGEEm?editors=1011)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#49227|[Codepen](https://codepen.io/sho666/pen/QWVbayP)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/YzOXYJO?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/qBMBWeN)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/YzOyJMo?editors=1010)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/VwGeXYN?editors=1010)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/wvEMmQe)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/xxaVJKY?editors=1011)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/JjaKzKM?editors=1010)|
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/XWPjaXY) |
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/KKxqKpQ?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/LYJLzLJ)
|PayRoom|[CodePen](https://codepen.io/water38198/pen/xxaLJje)
|suihsilan|[CodePen](https://codepen.io/suihsilan/pen/qBMoejY?editors=1010)
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/xxaQPOY?editors=1111) |
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/mdGvoEL)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/KKGWOoZ)|


