---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 36 - 練習建置 routes

觀看完課程影音「在一般網頁中引入 Vue Router」後，練習下方題目。

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

> 練習建置 routes
> - 參考課程教學，在 routes 中建立 pageOne 、 pageTwo 相關設定。
> - 讓使用者點擊 1 時，router-view 會顯示「第一頁」文字、使用者點擊 2 時，router-view 會顯示「第二頁」文字。
> 
>
> - 提示：pageOne 、 pageTwo 需要個別以物件方式，設定在 routes 中。

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 冬天#5215 |[CodePen](https://codepen.io/winter_/pen/mdGbOWW)|
| Wendy3#5615 |[CodePen](https://codepen.io/wendy03/pen/qBMWqrd)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/vYzByxy?editors=1010)|
| LinaChen#1796 |[CodePen](https://codepen.io/LinaChen/pen/poOzNex)|
| yuyu#6310 |[CodePen](https://codepen.io/yuyu0905/pen/OJoLbgO?editors=1010)|
| hannahTW#2224 |[CodePen](https://codepen.io/hangineer/pen/eYLOBWo)|
| 無名#6427 |[CodePen](https://codepen.io/Nomoney/pen/ExeYNwY)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/KKxPNyr?editors=1010)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/KKxPNXG) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/WNgeReP?editors=1010)|
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/eYLOgYN) |
| mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/ExeYZxy?editors=1011) |
| albee#9121 |[CodePen](https://codepen.io/albee-chang/pen/KKxPagP?editors=1011)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/wvEwgJO)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/mdGbRRj?editors=1010)|
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/zYJONwo?editors=1010)|
|Rainliao#2616|[CodePen](https://codepen.io/billpop741/pen/oNPvBoE)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/ZEMzLxp)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/OJoLWvG?editors=1011)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/qBMWrNJ)|
|楊苡安#2752|[codepen](https://codepen.io/yi-an-yang/pen/xxaKqBe?editors=1010)|
|DIO大人#4776|[codepen](https://codepen.io/oscar-2283/pen/BaOBRvV)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/xxaKdvE)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/KKxPqzO?editors=1010)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/GRXKvJb?editors=1010)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/yLxBpJb?editors=1010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/PodYRWy)|
|yoyo123456#0577|[Codepen](https://codepen.io/hungyoyo/pen/dyqbegB?editors=1010)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/poOzZKj?editors=1011)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/vYzBzqO)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/vYzBVoJ?editors=1011)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/abaoeKa) |
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/QWVLezv?editors=1010)|
|薯餅#3581|[Codepen](https://codepen.io/wendy03/pen/qBMWqrd)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/wvEvBaw)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/PodowWY?editors=1010)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/NWLWPmp)|
|Jill Lee#0809|[codePen](https://codepen.io/chi-ling-lee/pen/mdGdEjj?editors=1010)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/vYzYewx)|
|Bassjim#0118|[codepen](https://codepen.io/unrtxbaq/pen/MWqWPPz?editors=1011)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/dyqywLL?editors=1010)|
|DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/BaOBRvV)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/xxabjJY)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/GRXgzNg)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/WNgveVd?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/zYJGPmx?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/XWPrNPW)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/LYJpmMz)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/JjaGLjm?editors=1010)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/vYzLVQb?editors=1010)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/gOdrxYL?editors=1010)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/zYJqZOb)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/yLxJZdY?editors=1011)|
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/MWqjvKO?editors=1010) |
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/BaOZaBp?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/LYJLzyJ)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/gOdxjvM)
|Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/OJoaOpL?editors=1010) |
|黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/dyqavRE) |
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWqLxKW) |
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/RwepKZv) |