---
# System prepended metadata

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

---

# 🏅 6/14 (一) 每日任務 Day 36
###### tags: `Vue 直播班 - 2021 夏季班`

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

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

routes 設置可參考: https://courses.hexschool.com/courses/vue-2021/lectures/31862625

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

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

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

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

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

回報區
---
<!--1:秉成
Codepen:https://codepen.io/mick1031/pen/MWpzrga
-->

<!--2:tim Chou
Codepen:https://codepen.io/tim-chou/pen/mdWQpJG
-->

<!--3:Vic
Codepen:https://codepen.io/hsuan333/pen/MWpzrmj
-->
<!--4:陳sam
codepen:https://codepen.io/euldpliv/pen/mdWQpWa?editors=1010
-->

<!-- 5: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/vYxQdLB
-->

<!-- 6: Lina Chen
Codepen: https://codepen.io/LinaChen/pen/QWpJQpM
-->

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

<!-- 7: Joe Kuo
codepen: https://codepen.io/alertislow/pen/mdWQxvL?editors=1010
-->

<!-- 8: Jack
https://codepen.io/yxzzktmb/pen/PopxeEr
-->

<!-- 9: Sec
codepen: https://codepen.io/Sentiments/pen/xxqQzLB?editors=1011
-->

<!-- 10: Larry
codepen: https://codepen.io/manpower0708/pen/bGqQjvm
-->

<!-- 11: Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/PopxXEv
-->

<!-- 12: RitaHaung
https://codepen.io/Rita-Rossweisse/pen/jOBQRqO
-->

<!-- 13: leolee
https://codepen.io/nekorice/pen/poeQdOM
-->

<!-- 14: 小魚
codepen: https://codepen.io/jarvis1993/pen/yLMQvZx
-->

<!-- 15: Fred Chang
https://codepen.io/fred8196/pen/PopXYRG
-->

<!-- 16: youting 
https://codepen.io/youtingluo/pen/OJprNQR?editors=1010
-->

<!-- 17: Ethan
codepen: https://codepen.io/blazer030/pen/mdWaOyZ
-->

<!-- 18: MM
codepen: https://codepen.io/MINN3/pen/yLMGXZd
-->


<!-- 19: Jay
codepen: https://codepen.io/jayredk/pen/poeqdaG
 -->

<!-- 20: Tori
codepen: https://codepen.io/hayen/full/xxqmVNo
 -->
 
 <!-- 21: Dah
codepen: https://codepen.io/hayen/full/xxqmVNo
 -->
 
 <!-- 22: Oober
codepen:  https://codepen.io/xtsjrjdv/pen/bGqzZQL
 -->
 
<!-- 23: Stacey Huang
codepen: https://codepen.io/staceyhuang/pen/BaWbqOa
-->

<!-- 24: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/poeBPMR
-->
<!-- 25: jimmyFang
https://codepen.io/pohxiqqo/pen/mdWgpKB?editors=1010
-->

<!-- 26: Erica
https://codepen.io/ericadu/pen/poeMWRx
-->

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

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