---
# System prepended metadata

title: Vue CLI+Router 「增加切換頁面連結」 (7-2)
tags: [7. Router路由, Vue]

---

# Vue CLI+Router 「增加切換頁面連結」 (7-2)
###### tags: `Vue`、`7. Router路由`
2022.3.9

### Vue Cli + Router 操作介面介紹
![](https://i.imgur.com/JXQYeAB.png)

### 新增切換頁面
####   1. 新增預切換頁面。
![](https://i.imgur.com/kD8Tf5s.png)
####   2. 新增routes。
routes中component引入方式有兩種：
1. 標頭引入 `import HomeView from '檔案入徑';`
2. 箭頭函式引入 `() => import('檔案入徑')`

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

####   3. 在主頁面增加切換頁面連結。
![](https://i.imgur.com/Gj9lzKT.png)