---
# System prepended metadata

title: Vue學習#29 具名視圖
tags: [Vue 直播班 - 2022 春季班]

---

# Vue學習#29 具名視圖
###### tags: `Vue 直播班 - 2022 春季班`

## 具名視圖

router-view 用來顯示不同路徑的元件內容，萬一如果有一個網頁有多個 router-view 且想將不同元件顯示在指定的 router-view ，具名視圖就是將 router-view 命名並透過路由表將元件插入指定的 router-view 上

## 實作

### 在元件頁面新增多個 router-view ， 並為每個 router-view 命名

![](https://i.imgur.com/pAwhQsg.png)

### 路由表指定插入哪個 router-view

![](https://i.imgur.com/tLZwwYn.png)
跟巢狀路由一樣，在上一層的元件下新增 children，
不同的是我們插入多個元件所以 component 要換成 components，
並將元件匯入到指定(命名)的 router-view 上，
並將設定路徑叫 path1 (自定義名稱)

### 成功將不同元件放在指定的 router-view 上!

網址: `http://localhost:8080/#/nameview/path1`

![](https://i.imgur.com/lkDeSSq.png)
