---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 38 - 使用 methods 切換路由頁面

觀看課程影音「路由方法介紹」後，練習下方題目。

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

> 練習在 methods 進行換頁
> - 參考課程教學，在 changePage 設定 router 換頁功能。
> - 讓使用者點擊 1 時， router-view 會顯示「第一頁」文字、使用者點擊 2 時， router-view 會顯示「第二頁」文字， 使用者點擊第二頁的 button 也能正確切換成第一頁。
> 
>
> - 提示：會在 changePage 中設定 Vue router 的路由方法。
> - 本次練習主要是讓同學理解，使用 methods 切換 router 的效果。

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

## 回報流程

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


<!-- 解答：
const pageTwo = {
template: `<div>第二頁 <button type="button" @click="changePage">換頁</button></div>`,
methods: {
changePage() {
this.$router.push('/pageOne')
}
}
};
https://codepen.io/jmimiding4104/pen/bGZadbr

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/NWJmOLd) |
| py | [CodePen](https://codepen.io/Wpypy/pen/eYXoPQr) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/MWxRzYX) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/vYPMQGL?editors=1010)|
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/dyrLQzG?editors=1010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/eYXobog) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/wvOZNav) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/vYPMbmM?editors=1010) |
| Eden |[Codepen](https://codepen.io/iseden/pen/dyrLaoq)|
| Celine 510 |[Codepen](https://codepen.io/Celine-510/pen/mdogvMN)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/jOJRJve?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/qBvwvGN?editors=1111) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/poYBXWO) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/RwdmbbEhttps://codepen.io/barry91205/pen/poYBXWO) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/xxBNGdj) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/ExMzWpZ) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/RwdmZbg?editors=1010) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/poYmrOo) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/jOJoGVq) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/ExMzEOq) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/eYXarMp) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/XWGLXmv) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/zYbgOxB) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/gOyYvwv) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/mdgbxMg) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/YzMKvwV) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/xxBozRL) |
| Ting | [CodePen](https://codepen.io/liara/pen/JjVjbYd) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/XWQJNmG?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/qBwNBmG) |

<!--

| user | [CodePen]() |

-->