---
# System prepended metadata

title: 命名示圖 (7-5)
tags: [7. Router路由, Vue]

---

# 命名示圖 (7-5)
###### tags: `Vue`、`7. Router路由`
2022.3.9

#### &emsp;&emsp;在一個頁面中，如果出現兩個以上<router-view>時，可以用命名示圖方式區隔。

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

    
### 實作
#### 1. 新增命名示圖頁面
![](https://i.imgur.com/vTHLWgE.png)

#### 2. 新增 Routes 
![](https://i.imgur.com/zs7vHWy.png)

#### 3. 渲染頁面
![](https://i.imgur.com/qs3TlEi.png)

#### 成果
![](https://i.imgur.com/yAiLgX7.png)

