---
# System prepended metadata

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

---

# 🏅 6/17 (四) 每日任務 Day 39
###### tags: `Vue 直播班 - 2021 夏季班`

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

> 練習使用 pathMatch 進行換頁 (404 頁面設定)
> - 參考課程教學，在 router 中建立 routes 的相關設定。
> - 讓使用者點擊 1 時，會顯示「第一頁」文字、使用者點擊 2 時，會顯示「404」文字。
> - 提示一 : pageTwo 請勿使用 `path: '/aergnorgrea',`
> - 提示二 : 若要指向 404 不存再 router 需設定 `path: '/:pathMatch(.*)*',`

404 頁面導向設定，可參考:https://courses.hexschool.com/courses/vue-2021/lectures/31862753

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

![](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: '/:pathMatch(.*)*',
        component: pageTwo
      }
    ]
  })

-->

回報區
---

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

<!-- 2: Vic
CodePen: https://codepen.io/hsuan333/pen/VwpgXbv
-->
<!-- 3:陳sam
Codepen: https://codepen.io/euldpliv/pen/YzZBaNy?editors=1111
-->
<!-- 4.ifang/iva
Codepen: https://codepen.io/Hsu1Fang/pen/NWpoYVB
-->

<!-- 5: Alysa Chan
Codepen: https://codepen.io/alysachan/pen/LYWqdMG?editors=1111
-->

<!-- 6: Wendy Li
Codepen: https://codepen.io/rockayumitw/pen/RwpvyRj?editors=1010
-->

<!-- 7: Ethan
codepen: https://codepen.io/blazer030/pen/bGqzMem
-->

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

<!-- 9:RitaHuanag
https://codepen.io/Rita-Rossweisse/pen/gOmqKOE?editors=1010
-->

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

<!-- 11: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/NWpozrq
-->

<!-- 12: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/KKWJeOX -->

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

<!-- 14: leolee
codepen: https://codepen.io/nekorice/pen/bGqzxLz -->

<!-- 15: yijun
codepen: https://codepen.io/sandy3068/pen/RwpvqPP
-->

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

<!-- 16: Dah
codepen: https://codepen.io/fred8196/pen/KKWJbPb
-->

<!-- 17: Sec
codepen: https://codepen.io/Sentiments/pen/ExWrrZb
-->

<!-- 18: Jay
codepen: https://codepen.io/jayredk/pen/wvJNNXM
 -->

<!-- 19: Oober
codepem:https://codepen.io/xtsjrjdv/pen/GRWzebv?editors=1111
-->

<!-- 20: tim Chou
codepem:https://codepen.io/tim-chou/pen/QWpYRVG
-->

<!-- 21: Jack 
https://codepen.io/yxzzktmb/pen/rNyPgbd?editors=1010
-->

<!-- 22: Larry 
https://codepen.io/manpower0708/pen/zYZbZmB
-->

<!-- 23: Jessie Cheng 
https://codepen.io/JessieMosbi/pen/mdWoXPz
-->

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

<!-- 25: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/gOmyRRp
-->
<!--26: jimmyFang
https://codepen.io/pohxiqqo/pen/abJxqzm?editors=1010
-->

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

<!--28 YOYO
https://codepen.io/lumedkle/pen/NWjKPrx?editors=1010
-->

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

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