# Vue學習#26 Vue-Router 介紹
###### tags: `Vue 直播班 - 2022 春季班`

## 路由

實作網頁往往不會只做一頁，網頁之間的切換(網址變得不一樣)，切換過程就是路由


Client = 瀏覽器，向 Server 發出請求，而 Router 會依據網址進行分類來了解客戶端是在哪一個網頁，知道是哪一頁之後會就跟 Controller 說我要某某頁的資訊，Controller 就會跟 Model 要某某頁的資料，跟 View 要某某頁的模板，都資料畫面都渲染完之後就傳回 Server ， Server 再把完整的頁面傳給 Client

## 前端路由 / 後端路由

### 前端路由

#### 網址

`https://danny-1211.github.io/MyGuitar/#/productList`
前端路由的網址會多一個 `#`，再來接參數

#### 執行

前端路由除了在第一次載入時向伺服器提出請求外，網頁載入後的後續頁面切換，都不透過伺服器而是在瀏覽器端進行，一般都是 SPA 網頁架構，根據請求直接在同一個頁面跟換

#### SPA （Single Page Application）

透過 AJAX 讀取資料，並透過 JavaScript template 來產生 HTML ， 並把所有資料儲存在同一個頁面，所以 SPA 不需要更換頁面，而是根據路由切換來決定要將哪種內容直接顯示在頁面上

----

### 後端路由

#### 網址

`https://gnn.gamer.com.tw/detail.php?sn=231538`
不會多一個 `#`

#### 執行

當使用者在瀏覽器上不斷藉著點選超連結，或者是變更路徑的方式切換不同的網址，此時瀏覽器就會依照給定的不同的網址，向後端的網頁伺服器發送請求 (Request)，而伺服器接收到瀏覽器給的請求後，就會回應相對應的內容給瀏覽器，讓瀏覽器將內容渲染出來

## Vue Router

Vue Router 是 Vue.js 官方提供的前端路由管理器。採用的是**前端路由**

## 參考
[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)
[Day20– 前端小字典三十天【每日一字】– SPA](https://ithelp.ithome.com.tw/articles/10160709)