---
# System prepended metadata

title: "\U0001F3C5 6/16 (三) 每日任務 Day 38"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 6/16 (三) 每日任務 Day 38
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 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-2021/lectures/31862733

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

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

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

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

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

回報區
---

<!-- 1:Lina Chen
CodePen: https://codepen.io/LinaChen/pen/bGqOJVO
-->

<!-- 2:Jack
https://codepen.io/yxzzktmb/pen/zYZyXKB
-->

<!-- 3:Vic
CodePen:https://codepen.io/hsuan333/pen/ZEeVZeb
-->

<!-- 4:leolee
CodePen:https://codepen.io/nekorice/pen/WNpLWrm
-->

<!-- 5:LiShang
CodePen:https://codepen.io/li-shang/pen/xxqmeQP
-->
<!-- 6: ifang
codePen:https://codepen.io/Hsu1Fang/pen/jOBXRdb
-->

<!--7: yijun
codepen: https://codepen.io/sandy3068/pen/OJprGdY
-->

<!-- 8: Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/PopXgrr
-->

<!-- 9: Alysa Chan
codepen: https://codepen.io/alysachan/pen/abJPxdm?editors=1111
-->

<!-- 10: Harold 
codepen: https://codepen.io/YuWin0805/pen/XWMowaE
-->

<!-- 11: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/oNZJRem?editors=1011
-->

<!-- 12: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/YzZdbvm?editors=1010
-->

<!-- 13: Joe Kuo
codepen: https://codepen.io/alertislow/pen/KKWbLOQ?editors=0010
-->

<!-- 14: Larry
codepen: https://codepen.io/manpower0708/pen/xxqmoKe
-->

<!-- 15: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/RwpEzrR?editors=1010 -->

<!-- 16: tim Chou
codepen: https://codepen.io/tim-chou/pen/RwpEzVo-->

<!-- 17: Sec
codepen: https://codepen.io/Sentiments/pen/VwpqoEd?editors=1010

<!-- 18: 陳sam
codepen: https://codepen.io/euldpliv/pen/wvJNwPG
-->

<!-- 19: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/gOmqrvb
-->

<!-- 20: Dah
Codepen: https://codepen.io/hua0124/pen/gOmqwNE
-->

<!-- 21: MM
Codepen:https://codepen.io/MINN3/pen/PopVYKw
-->

<!-- 22: RitaHunag
https://codepen.io/Rita-Rossweisse/pen/RwpvpJB
-->

<!-- 23: Jay
codepen: https://codepen.io/jayredk/pen/yLMZXJE
 -->
 
<!-- 24: Fred Chang
codepen: https://codepen.io/fred8196/pen/ZEewWmx
 -->

<!-- 25: Oober 
codepen:https://codepen.io/xtsjrjdv/pen/WNpPmWy?editors=1111
-->

<!-- 26: Stacey Huang
codepen: https://codepen.io/staceyhuang/pen/wvJOYNa?editors=1010
-->

<!-- 27: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/GRWLEWg
-->
<!--28: jimmyFang
https://codepen.io/pohxiqqo/pen/poeBpMX?editors=1010
-->

<!--29: Erica
https://codepen.io/ericadu/pen/PopMJjJ
-->

<!--30: Chiang
https://codepen.io/ChiangJ/pen/mdmyBoP?editors=1010
-->

<!--31: twoz
https://codepen.io/twoz/pen/gOWPRyL?editors=1010
-->