# 🏅 6/18 (五) 每日任務 Day 40
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 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-2021/lectures/31862699

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


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


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

回報區
---
<!--1:Alpha
Codepen:https://codepen.io/alphatero/pen/gOmEwVQ
-->

<!--2:Lina Chen
Codepen:https://codepen.io/LinaChen/pen/KKWENPw
-->

<!--3:Vic
Codepen:https://codepen.io/hsuan333/pen/vYxPyNz
-->

<!--4:leolee
Codepen:https://codepen.io/nekorice/pen/KKWENKw
-->
<!-- 5:
Codepen:https://codepen.io/euldpliv/pen/PopLbqV?editors=1111
-->

<!-- 6:
Codepen: https://codepen.io/hayen/pen/xxqmVNo?editors=0010
-->

<!-- 7:
codepen: https://codepen.io/blazer030/pen/bGqZBmE
-->

<!-- 8: yijun
codepen: https://codepen.io/sandy3068/pen/vYxPyvw
-->

<!-- 9: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/eYvXgvj
-->

<!-- 10: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/RwpdpBQ?editors=1010
-->

<!-- 11: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/yLMwVRb?editors=1010
-->

<!-- 12: Larry
https://codepen.io/manpower0708/pen/OJpqpqa
-->

<!-- 13: Joe Kuo
https://codepen.io/alertislow/pen/jOBJmBb?editors=1010
-->

<!-- 14: Jay
codepen: https://codepen.io/jayredk/pen/VwpRGoy
-->

<!-- 15: Sec
codepen: https://codepen.io/Sentiments/pen/gOmEdGv?editors=1010
-->

<!-- 16: Stacey Huang
https://codepen.io/staceyhuang/pen/MWpxPdo
-->

<!-- 17: Jessie Cheng
https://codepen.io/JessieMosbi/pen/dyvrdNK
-->

<!-- 18: Fred Chang
https://codepen.io/fred8196/pen/QWpoRKL
-->

<!-- 19: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/OJpGgwR
-->
<!-- 20: jimmyFang
https://codepen.io/pohxiqqo/pen/ZEeZrWb?editors=1010
-->

<!-- 21: Alysa Chan
codepen: https://codepen.io/alysachan/pen/ZEeZPJa?editors=1111
-->

<!-- 22: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/zYZXQWZ -->

<!-- 23: OOber
codepen:https://codepen.io/xtsjrjdv/pen/MWpdYbP?editors=1111
-->

<!-- 24: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/wvJbBPp?editors=1011
-->

<!-- Erica
https://codepen.io/ericadu/pen/RwpXLLV
-->

<!-- 26: YOYO
codepen: https://codepen.io/lumedkle/pen/eYWOmgG?editors=1010
-->

<!-- 27: Chiang
codepen: https://codepen.io/ChiangJ/pen/zYwxPqQ?editors=1010
-->

<!-- 28: twoz
codepen:
https://codepen.io/twoz/pen/gOWPZWR?editors=1010
-->

<!-- 29: Stacey Huang
codepne: https://codepen.io/staceyhuang/pen/OJmpyEE
-->