--- tags: Vue 直播班 - 2023 冬季班 --- # 🏅 Day 40 - HTML 及 components 的片段練習(具名視圖) 觀看課程影音「一個元件插入多個視圖 - 具名視圖」後,練習下方題目。 題目 --- 操作 [這個模板](https://codepen.io/hexschool/pen/wvxQZyB),執行以下要求(只能操作 JS 的部分): > HTML 及 components 的片段練習(具名視圖) > - 參考課程教學,在 components 中對 topComponent 、downComponent 做出相關設定。 > - 讓畫面能夠呈現上方元件、下方元件,實際狀況如圖: > ![](https://i.imgur.com/c5y0E1T.png) > > - 提示: topComponent 、 downComponent 需指向 router-view 中的 top 以及 down 。 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes: [ { path: '/', components: { top: topComponent, down: downComponent, } }, ] }) app.use(router); --> 回報區 --- | Discord | CodePen / 答案 | |:----------:|:-------------------------------------------------------:| | Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBvGePq?editors=1010) | | Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/NWJVQMo) | | py | [CodePen](https://codepen.io/Wpypy/pen/QWoReBP) | | JING | [CodePen](https://codepen.io/HSUANIN0327/pen/MWxMgYy) | | Wei_Rio |[CodePen](https://codepen.io/wei_wu/pen/NWJZKqQ?editors=1010)| | XinYu |[CodePen](https://codepen.io/HsuXinYu/pen/BabgBbo?editors=1010)| | RayRay |[CodePen](https://codepen.io/CityRay/pen/GRebKbR)| | Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/xxBoxrB)| | Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/YzgoXPL?editors=1010) | | kawa | [CodePen](https://codepen.io/z83xji6/pen/KKEjpaV) | | Uli | [CodePen](https://codepen.io/uli1313/pen/NWJZNPZ?editors=1010) | | Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/oNVrwWr) | |Edne|[Codepen](https://codepen.io/iseden/pen/qBvzxpo)| | 熊大 | [CodePen](https://hackmd.io/gl3Wx-8fQMu4rlFIPnT2BQ) | | Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/gOEVYbj) | | Charlotte Lee | [CodePen](https://codepen.io/char849/pen/KKYPQVJ) | | Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/OJGLvZP) | | PayRoom |[CodePen](https://codepen.io/water38198/pen/GRLKXOj) | 貢波波夫 |[CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/VwNwaEM) | Ariel | [CodePen](https://codepen.io/ariel0510/pen/rNbaWZB?editors=1010) | <!-- | user | [CodePen]() | -->