---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 的效果。

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615|[Codepen](https://codepen.io/wendy03/pen/QWVWZPB)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/vYzYVwg)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/mdGdzNw) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/OJoJaLz) |
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/PodoxYO)|
| yuyu#6310 |[codepen](https://codepen.io/yuyu0905/pen/LYJYXYN?editors=1010)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/vYzYQBx)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/dyqyQoO?editors=1011)|
| 楊苡安#2752|[Codepen](https://codepen.io/yi-an-yang/pen/yLxLQaW)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/dyqyQJz)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/ExeYNwY)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/xxaxQzg?editors=1010)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/gOdOQKj)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/XWPWyOj?editors=1010)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/VwGwVqQ?editors=0011)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/mdGdaNd)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/rNZNPVK)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/PodoVmb?editors=1011)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/XWPWOgy)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/JjajxNq)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/LYJYqzP)|
|冬天#5215|[Codepen](https://codepen.io/winter_/pen/dyqyaJP)|
|DIO大人#4776|[Codepen](https://codepen.io/oscar-2283/pen/GRXRzGr)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/bGxGZVK)|
|泊岸#3466|[codepen](https://codepen.io/qoq77416416/pen/PodoLzQ?editors=1010)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/VwGwRQM)|
|masterYan#2480|[codepen](https://codepen.io/htzwgoqt-the-looper/pen/gOdOywE?editors=1111)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/GRXKxYP)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/MWqYWGW)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/OJoPPxK)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/mdGyeew?editors=1010)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/dyqPYzv)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/QWVwjOY)|
hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/JjaoraQ?editors=0010)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/NWLPaOa)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/xxabjJY)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/poOvYxm?editors=1010)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/rNZaRrN)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/PodqoPj?editors=1010)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/vYzOpbQ?editors=1111)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/yLxNPoQ?editors=1111)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[CodePen](https://codepen.io/sho666/pen/yLxNpXN?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/JjajeRK) |
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/mdGezZd) |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/qBMbyJe?editors=1010)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/MWqyBym?editors=1011)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/oNPLgzN)|
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/wvEzqGz) |
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/jOvwObY?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/ExeXwvQ)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/ExeXBjd?editors=0011)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/KKxvxjO)
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/zYJjreW)
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/gOdQXOE) |
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/ExeOmBv)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/eYLxvyr)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/rNqmKPa)|