--- tags: Vue 直播班 - 2023 冬季班 --- # 🏅 Day 39 - 使用 pathMatch 進行換頁(404 頁面設定) 觀看課程影音「預設路徑以及重新導向」後,練習下方題目。 題目 --- 操作 [這個模板](https://codepen.io/hexschool/pen/abjQxJV?editors=1010),執行以下要求(只能操作 JS 的部分): > 練習使用 pathMatch 進行換頁(404 頁面設定) > - 參考課程教學,在 router 中建立 routes 的相關設定。 > - 讓使用者點擊 1 時,會顯示「第一頁」文字、使用者點擊 2 時,會顯示「404」文字。 > ![](https://i.imgur.com/Ng1JVAb.gif) > > - 提示一 : pageTwo 請勿使用 `path: '/aergnorgrea',` > - 提示二 : 若要指向 404 不存在 router 需設定 `path: '/:pathMatch(.*)*',` ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: 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) <!-- | user | [CodePen]() | -->