---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 39 - 使用 pathMatch 進行換頁（404 頁面設定）

觀看課程影音「預設路徑以及重新導向」後，練習下方題目。

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/abjQxJV?editors=1010)，執行以下要求（只能操作 JS 的部分）：

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

## 回報流程

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


<!-- 解答：

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/mdGyBNR) |
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/qBMEPeE) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/XWPJeLQ) |
|ㄚ翔#8126|[CodePen](https://codepen.io/engineerjohnson/pen/WNgbXvJ)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/yLxyPyQ?editors=1010)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/bGxNoXa) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/MWqYOwZ?editors=1010) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/ExeYNwY) |
| 楊苡安#2752 | [CodePen](https://codepen.io/yi-an-yang/pen/eYLmejm?editors=1010) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/PodwOae?editors=1011) |
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/VwGYrOr)|
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/GRXgOBx)|
|Alex#9978|[CodePen](https://codepen.io/datsxzqg-the-selector/pen/ZEMYvGQ?editors=1010)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/yLxypPJ?editors=1011)|
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/WNgbdar?editors=1010)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/xxabpBz?editors=1111)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/zYJxRyb)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/ExeaQJz)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/VwGYXPm?editors=1011)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/MWqYVzg?editors=1010)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/xxabjJY)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/qBMEQqO?editors=1010)|
|masterYan#2480|[Codepen](https://codepen.io/wendy03/pen/qBMEPeE)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/wvEwmYL)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/WNgbPEj)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/dyqPaEo)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/abazXqP)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/qBMEvYa?editors=1010)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/dyqPrJN)
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/gOdbybd?editors=1010)
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/GRXJRZW?editors=1011)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/YzOXGQL)|
| hannahTW#2224 |[Codepen](https://codepen.io/hangineer/pen/OJoVRQG?editors=0110)|
| LinaChen#1796 |[Codepen](https://codepen.io/LinaChen/pen/eYLNWxj)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/VwGLzBd?editors=1010)
|柚子#3958|[CodePen](https://codepen.io/as6625998/pen/NWLqyPG?editors=1011)|
|圈圈#4060|[codepen](https://codepen.io/wjejfczn-the-bold/pen/YzOXePd?editors=0010)|
|Jill Lee#0809|[Codepen](https://codepen.io/chi-ling-lee/pen/XWPbEyW?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/JjadBvY?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/GRXgOOy) |
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/wvEKQao?editors=1011) |
|小木馬#8760|[codepen](https://codepen.io/wmmtbcsd/pen/WNgrrwg?editors=1010) |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/ZEMQMyN?editors=1010)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/mdGPMer)
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/poOyZeP?editors=1010)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/abaZzpr?editors=1011)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/vYzZYXG?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/XWPgeeV)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/yLxXdOv?editors=1011)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/wvEqYwN)
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/XWPqXLq?editors=1010)
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/vYzbxjE)
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/VwEbdoz)