---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 38
###### tags: `Vue 直播班 - 2022 春季班`

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

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

路由方法可參考: https://courses.hexschool.com/courses/vue-20212/lectures/35988935

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


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


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

回報區
---
| 報數 | 組別-名字 | codepen / 其他回饋 |
|:--------:| :--------: | :--------: |
|1| Larry | https://codepen.io/larrylinr5/pen/YzEvpRE |
|2|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/MWOXbvM|
|3| 肉鬆 | https://codepen.io/klrkicog/pen/GROGNPd?editors=1010 |
|4|Wenfish|https://codepen.io/wenfisht/pen/oNoyYOe|
|5|Jasper|https://codepen.io/li-jasper/pen/KKyeaVw |
|6|Gill|https://codepen.io/Gill-Chin/pen/WNXyRar?editors=1010 |
|7|Aaron Tu|https://codepen.io/aarontu/pen/yLPEgWb|
|8|POPEYE|https://codepen.io/popeye_ux/pen/eYeKgwe|
|9|Yunei|https://codepen.io/Yunei/pen/jOaKBJx|
|10|YC|https://codepen.io/YCLu/pen/JjOZWzP |
|11|Rick Tzeng|https://codepen.io/rick917jp6/pen/mdqKWzE |
|12|EmptyWu|https://codepen.io/emptywu/pen/QWOxvNB |
|13|Sheep| https://codepen.io/SheepNDW/pen/ExbRmdK |
|14|威爾|https://codepen.io/WILL_Wu/pen/oNoywNo|
|15| 黃士桓 | https://codepen.io/shr-huan-huang/pen/NWwzggK |
|16|陳暐中|https://codepen.io/wei-z/pen/ExbRXvv?editors=1010|
|17| Iris Huang | https://codepen.io/ythuang/pen/yLPEXGM |
|18| Jason Chen | https://codepen.io/jason60810/pen/jOaKLOy |
|19|Tim Lin|https://codepen.io/TimmyLin/pen/NWwzvrb|
|20|Arista|https://codepen.io/arista-hsieh/pen/MWOXvmQ|
|21|Henry wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/zYPadjy?editors=1010|
|22|Terry21|https://codepen.io/feng0409/pen/WNXyZOg?editors=1010 |
|23|andersonshen| https://codepen.io/luxyenni-the-bold/pen/BamVwgG |
|24|shio| https://codepen.io/shioyen/pen/abVKVXY |
|25|tingyu|https://codepen.io/dgltu/pen/YzEveWp?editors=1011|
|26|我是泇吟|https://codepen.io/kljuqbxs/pen/LYOrdVz|
|27|sally|https://codepen.io/intelligence753/pen/NWwzzxY?editors=1010|
|28|Charlotte Lee|https://codepen.io/charlotte-lee/pen/abVKROe |
|29|咖咖|https://codepen.io/gon790219/pen/zYPamRx |
|30|kevinhes|https://codepen.io/kevinhes/pen/dyZjPmB?editors=1010 |
|31|Himi|https://codepen.io/Himi/pen/mdqjyYE |
|32|Bruno Yu|https://codepen.io/bruno-yu/pen/JjOBoaV |
|33|Calon|https://codepen.io/Calon0118/pen/qBVyxza|
|34|ZY Hsu|https://codepen.io/zihyin/pen/LYOJpxW?editors=1010|
|35| Otis | https://codepen.io/humming74/pen/abVaEKK?editors=1010 |
|36| mei | https://codepen.io/Shila-Chen/pen/YzERWor |
|37|Judy☻|https://codepen.io/hsiaohan/pen/bGYOxMz?editors=1010|
|38| Bonnie | https://codepen.io/bonnieli1414/pen/vYWvPGY?editors=1010 |
|39| 紙飛機 | https://codepen.io/paperplanea/pen/bGYPVKb |
| 40 | sihle | https://codepen.io/bugbug777/pen/dyJyNbP |
|41|Mylène| https://codepen.io/hamajibashi/pen/PoEWVMG |
|42|Gui|https://codepen.io/guitimliu/pen/KKZJQMv
|43|大衛|https://codepen.io/exnsrpjc/pen/gOoymgK |
|44|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/ZErzJQx |