---
# System prepended metadata

title: "\U0001F3C5 6/15 (二) 每日任務 Day 37"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 6/15 (二) 每日任務 Day 37
###### tags: `Vue 直播班 - 2021 夏季班`

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

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

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

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

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

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

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

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

回報區
---
<!--1:Alpha
Codepen:https://codepen.io/alphatero/pen/wvJRGaM
-->

<!--2:Lina Chen
Codepen:https://codepen.io/LinaChen/pen/jOBXqPy
-->

<!--3:leo lee
Codepen:https://codepen.io/nekorice/pen/LYWMNVX
-->

<!--4: 陳sam
codepen:https://codepen.io/euldpliv/pen/ExWGKaL
-->

<!--5: Vic
codepen:https://codepen.io/hsuan333/pen/bGqOpqw
-->

<!-- 6: youting 
codepen: https://codepen.io/youtingluo/pen/KKWbzoy?editors=1011
-->

<!-- 7. harold 
codepen: https://codepen.io/YuWin0805/pen/KKWbzEo
-->

<!-- 8: Alysa Chan
codepen: https://codepen.io/alysachan/pen/JjWwKdj
-->

<!-- 9: Tori
codepen: https://codepen.io/hayen/full/xxqmVNo
-->

<!-- 10: tim Chou
codepen: https://codepen.io/tim-chou/pen/ExWGgyZ
-->

<!-- 11:
https://codepen.io/yxzzktmb/pen/ZEeVpBW?editors=1011
-->

<!-- 12: Joe Kuo
codepen: https://codepen.io/alertislow/pen/vYxvXyr?editors=1010
-->

<!-- 13: Ethan
codepen: https://codepen.io/blazer030/pen/MWpZbKv
-->

<!-- 14: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/rNyoLvB
-->

<!-- 15: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/jOBXwLe?editors=1010
-->

<!-- 16: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/eYvbRMq?editors=1011 -->

<!-- 17: MM
codepen:https://codepen.io/MINN3/pen/ZEeVyNE -->

<!-- 18: Larry
codepen:https://codepen.io/manpower0708/pen/GRWPvJG?editors=1100 -->

<!-- 19: Wendy Li
codepen:https://codepen.io/rockayumitw/pen/poeqdPQ?editors=1011 -->

<!-- 20: Jay
codepen: https://codepen.io/jayredk/pen/MWpZOOx
 -->

<!-- 21: Fred Chang
https://codepen.io/fred8196/pen/YzZdYrv
-->

<!-- 22: yijun
codepen: https://codepen.io/sandy3068/pen/YzZdjmr
-->

<!-- 23: Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/LYWMvvm
-->

<!-- 24: Sec
codepen: https://codepen.io/Sentiments/pen/jOBXgvE?editors=1010
-->

<!-- 25: Dah
codepen: https://codepen.io/hua0124/pen/vYxbXNe
-->

<!-- 26: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/xxqMqMX
-->

<!-- 27: OOber 
https://codepen.io/xtsjrjdv/pen/Rwpvddp?editors=1011
-->

<!-- 28: Stacey Huang
https://codepen.io/staceyhuang/pen/mdWozzY
-->

<!-- 29: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/oNZOwXQ
-->
<!-- 30: jimmyFang
https://codepen.io/pohxiqqo/pen/rNybpPa?editors=1010
-->

<!-- 31: Erica
https://codepen.io/ericadu/pen/poeMWPQ
-->

<!-- 32: Chiang
https://codepen.io/ChiangJ/pen/ExmaweG?editors=1010
-->

<!-- 33: twoz
https://codepen.io/twoz/pen/PomZjxb?editors=1011
-->