---
# System prepended metadata

title: "\U0001F3C5 Day 36 - 練習建置 routes"
tags: [JS 直播班 - 2023 秋季班]

---

# 🏅 Day 36 - 練習建置 routes

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

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

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


## 回報流程

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

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

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




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/WNmyOoZ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/poYKwdK) |
| py | [CodePen](https://codepen.io/Wpypy/pen/dyrKoyK) |
| annchou | [CodePen](https://codepen.io/annchou_illu/pen/abMKapd) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/vYPrvbR) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/MWxxQbr?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/gOEEvga) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/BabbYWz) |
|wei_rio|[CodePen](https://codepen.io/wei_wu/pen/PoLLQRG?editors=1010)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/yLwwvqj) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/RwddQzG) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/gOEEepR?editors=1010) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/GReexrv?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/JjzzLpK?editors=1010) |
| Hedy | [CodePen](https://codepen.io/Hedy_H/pen/KKEERMw?editors=1010) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/ExMMRvd) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/mdoojeW) |
| yuling |[Codepen](https://codepen.io/igzdflpu/pen/zYbbmXb)|
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/poYYxYV?editors=1010) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/QWoozMW?editors=1010) |
| Eden | [Codepen](https://codepen.io/iseden/pen/NWJJJvz)|
| Ting | [CodePen](https://codepen.io/liara/pen/dyrrExo) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/bGZJEzG) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/yLwremg) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/poYByRw?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/gOEyWop?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/JjzVydE?editors=1010) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/GReLrXO?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/BabEXJv) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/bGZydeN) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/NWJZxWM) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/LYaKweZ) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/abxoqJN) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/gOyYeGV)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/dyLPbmN?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/BaEzapQ) |
 | macihuang | [CodePen](https://codepen.io/macy1215/pen/wvZWxKG) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/BaEZjqN?editors=1010) |
 
<!-- 
 
| user | [CodePen]() |

-->

