---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/mdoYWLK?editors=1010) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/oNVRZqG) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/XWGwMoN?editors=1010) |
| py | [CodePen](https://codepen.io/Wpypy/pen/zYbQZMN?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/yLwWMqy?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/yLwWMEy) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/ZEPNydN) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poYmrJY?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/VwROzeb) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/WNmBZRQ) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/yLwWPVj) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/GReaydG?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/jOJozKx?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/YzgbaoN?editors=1010) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/xxBNjjg?editors=1010) |
| wei_Rio |[CodePen](https://codepen.io/wei_wu/pen/BabeXeM?editors=1010)|
| Eden |[Codepen](https://codepen.io/iseden/pen/abMgqmw)|
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/dyrxbPV) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/oNOvELB) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/WNWezXw?editors=1010) |
|PayRoom|[CodePen](https://codepen.io/water38198/pen/YzMKvWQ)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/MWRYbpZ?editors=1010) |
| Ting | [CodePen](https://codepen.io/liara/pen/zYXYowx) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/RwOPEPe) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/XWQXoMd) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/mdgEJGZ) |

<!--
| user | [CodePen]() |
-->