# Vue學習#27 Vue Cli 中使用 Vue Router
###### tags: `Vue 直播班 - 2022 春季班` `Vue cli`

## Vue Router

利用 CLI 建立專案的時候，就可以預設安裝 Router

### main.js

可以看到預設就 import 跟 use router

### index.js

在 index.js 匯入了 Vue Router 的方法
routes 為路由表，並創建一個路由，然後匯出

### App.vue

在 App.vue 可以看到 router-link 來切換網址，以及 router-view 顯示相對應網頁的內容

## 開始新增路由

### 先創建一個元件



### index.js 撰寫元件路由

在 index.js 的路由表撰寫元件的路徑名稱跟要匯入的元件，路徑名稱就是 router-link 尋找該元件網頁的元件內容

### 在其他頁面(元件)使用 router-link 填入路徑

我們在 App.vue 中加入 router-link 標籤並加入剛剛在路由表填入的自定義路徑名稱，當我們點了這個標籤他就會顯示該元件的內容

### 成功!


## 提醒

### router-view 標籤不能拿掉

因為 Vue-router 是採前端路由的方式，透過模擬路由來讓使用者覺得前往不同的頁面，實際上是透過路由名稱來找尋元件的資料以及模板，並在透過 rotuer-view 將資料顯示在上面，如果把 router-view 拿掉就算切換了頁面也看不到該網頁的內容

### 修改 router-link 樣式

如果想透過 CSS 修改 router-link 樣式，在 CSS 修改 <font color='red'> `a` </font> 超連結就可以成功修改囉

## 參考
[Vue Router頁面路由初次體驗 — 安裝與使用](https://medium.com/web-design-zone/vue-router%E9%A0%81%E9%9D%A2%E8%B7%AF%E7%94%B1%E5%88%9D%E6%AC%A1%E9%AB%94%E9%A9%97-%E5%AE%89%E8%A3%9D%E8%88%87%E4%BD%BF%E7%94%A8-bb5db769f1db)
[Day 08: Vue Router 超基本部分](https://ithelp.ithome.com.tw/articles/10237638)