---
# System prepended metadata

title: "\U0001F3C5 Day 40 - HTML 及 components 的片段練習（具名視圖）"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 / 答案                      |
|:----------:|:-------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/LYJVRKB)|
| Wendy3#5615 |[CodePen](https://codepen.io/wendy03/pen/dyqopBg)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/LYJVbPJ) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/zYJGoOp) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/abaOBvG) |
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/OJoVbRV)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/OJoVbpy)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/dyqoOmB)|
|Potatolee#7749|[codepen](https://codepen.io/potatoleee/pen/YzOXpYm?editors=1010)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/BaONQEW)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/RwYPoOr)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/WNgvRbd?editors=1011)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/PodqWzj?editors=1010)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/WNgvRwM)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/xxabjJY)|
|楊苡安#2752|[Codepen](https://codepen.io/yi-an-yang/pen/oNPXWdR)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/OJoVmrb)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/ZEMGyBV)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/GRXJvoG?editors=1010)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/qBMdXdr)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/xxaGLyP?editors=1010)
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/YzOXxgJ)
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/KKxPord)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/ExeYNwY)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/YzOXYxa)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/MWqwOpZ)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/MWqwQwp?editors=1111)|
|圈圈#4060|[codepen](https://codepen.io/wjejfczn-the-bold/pen/yLxNvOM?editors=1010)|
|Jill Lee#0809|[Codepen](https://codepen.io/chi-ling-lee/pen/wvEamRX)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/NWLqMaV)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/LYJVBdG?editors=1010)|
hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/XWPbqVN?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/OJoVoRB)|
|出事了阿伯#9923|[codepen](https://codepen.io/BradpittLai/pen/PodqdJx?editors=1010)|
| christina#6185 |[ Codepen ](https://codepen.io/chrisc0210/pen/poOJXza)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/eYLpGNg?editors=1010) |
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/vYzNQyO) |
|Alex#9978|[codepen](https://codepen.io/datsxzqg-the-selector/pen/yLxYWro)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/GRXoKzK?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[codepen](https://codepen.io/sho666/pen/mdGeyQz?editors=1010)|
|小木馬#8760|[codepen](https://codepen.io/wmmtbcsd/pen/mdGVVOB)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/jOvqLWx)
|YI#0863|[codepen](https://codepen.io/YI0305/pen/MWqyBXr?editors=1010)|
|Bassjim#0118|[codepen](https://codepen.io/unrtxbaq/pen/mdGEymO)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/OJogJpg?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/wvEerPK)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/BaOdqav)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/vYzjGNB?editors=1010)
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/PoyjGmo)



