---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 40
###### tags: `Vue 直播班 - 2022 春季班`

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

> HTML 及 components 的片段練習(具名視圖)
> - 參考課程教學，在 components 中對 topComponent 、downComponent 做出相關設定。
> - 讓畫面能夠呈現上方元件、下方元件，實際狀況如圖:
> 
> - 提示: topComponent 、 downComponent 需指向 router-view 中的 top 以及 down 。

具名視圖設定可參考 : https://courses.hexschool.com/courses/vue-20212/lectures/35988932

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


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/',
components: {
top: topComponent,
down: downComponent,
}
},
]
})
app.use(router);
-->

回報區
---
| 報數 | 組別-名字 | codepen / 其他回饋 |
|:--------:| :--------: | -------- |
|1| 肉鬆 | https://codepen.io/klrkicog/pen/zYPLydW?editors=1010 |
|2| Iris Huang | https://codepen.io/ythuang/pen/BamPvwo |
|3| Larry | https://codepen.io/larrylinr5/pen/jOapXLy |
|4| Jason Chen | https://codepen.io/jason60810/pen/vYWavew |
|5|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/ExbpGjb |
|6|kevinhes| https://codepen.io/kevinhes/pen/eYejbMV?editors=1010 |
|7|Bruno Yu| https://codepen.io/bruno-yu/pen/JjOBwgV |
|8|威爾|https://codepen.io/WILL_Wu/pen/xxPJMLK|
|9|我是泇吟|https://codepen.io/kljuqbxs/pen/WNXKPRd|
|10| Sheep | https://codepen.io/SheepNDW/pen/QWOBYJV |
|11|POPEYE|https://codepen.io/popeye_ux/pen/bGYjzPj|
|12|Yunei|https://codepen.io/Yunei/pen/yLPqZdr|
|13|Aaron Tu|https://codepen.io/aarontu/pen/VwrBgza|
|14|EmptyWu|https://codepen.io/emptywu/pen/qBVyvjm |
|15|kk|https://codepen.io/potatokaka/pen/WNXKmKV?editors=1010|
|16|陳暐中|https://codepen.io/wei-z/pen/JjOBzzO?editors=1010|
|17|Charlotte Lee|https://codepen.io/charlotte-lee/pen/VwrBRoG?editors=1010|
|18| 黃士桓 | https://codepen.io/shr-huan-huang/pen/rNYrbzp |
|19| Arista | https://codepen.io/arista-hsieh/pen/NWwBmJp |
|20|Calon|https://codepen.io/Calon0118/pen/MWOBRdV|
|21|YC|https://codepen.io/YCLu/pen/ZEajNWM |
|22|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/qBVyGjB |
|23|Rick Tzeng|https://codepen.io/rick917jp6/pen/RwjBXdN |
|24|ZY Hsu|https://codepen.io/zihyin/pen/OJOoyQa?editors=1010 |
|25| andersonshen | https://codepen.io/luxyenni-the-bold/pen/vYWzpaw |
|26| Otis | https://codepen.io/humming74/pen/dyZqJqa?editors=1010 |
|27| shio | https://codepen.io/shioyen/pen/BamOYyL|
|28| 咖咖 | https://codepen.io/gon790219/pen/oNoPPBy |
|29|Jasper|https://codepen.io/li-jasper/pen/bGYxPdM |
|30|Gill|https://codepen.io/Gill-Chin/pen/rNYQBLJ?editors=1010 |
|31|mei|https://codepen.io/Shila-Chen/pen/wvPQzaQ |
|32|sally|https://codepen.io/intelligence753/pen/zYPMgYG?editors=1010 |
|33|Jud☻|https://codepen.io/hsiaohan/pen/eYebLXZ?editors=1010 |
|34|Benson|https://codepen.io/soul81624/pen/NWweOBN |
|35|Bonnie|https://codepen.io/bonnieli1414/pen/JjOwzpg?editors=1010 |
|36|紙飛機| https://codepen.io/paperplanea/pen/PoOrPLr |
| 37 | sihle | https://codepen.io/bugbug777/pen/BaJapwJ |
|38|Mylène| https://codepen.io/hamajibashi/pen/RwxKdWa |
|39|Gui|https://codepen.io/guitimliu/pen/rNpPJJq
|40|大衛| https://codepen.io/exnsrpjc/pen/MWrRpQw |
|41|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/RwQbZKP|