Vue Router頁面路由初次體驗 — 安裝與使用
如同前面章節介紹過的，Vue.js 的核心是用來處理「狀態」與「網頁模板」的映射關係。
當整個網站逐漸發展成為應用程式的時候，Vue.js 元件、甚至是頁面之間切換的流程、狀態的邏輯，若要使用原本我們所熟悉的v-if、:is指令，就顯得有些力不從心。
要了解Vue Router，就需要從「路由」開始。
什麼是路由
當我們從一個網頁上點選超連結，到達下一個網頁。在瀏覽器上面可以觀察到網址列顯示的文字，會不斷地切換。例如從 http://www.abc.com/index.htm 切換到 http://www.abc.com/news.html時，這種切換過程就是路由。由於網站伺服器透過網址的不同，決定什麼時候該提供什麼資料給使用者。
現在路由可分為後端路由與前端路由：
後端路由vs前端路由
當使用者在瀏覽器上不斷藉著點選超連結，或者是變更路徑的方式切換不同的網址，此時瀏覽器就會依照給定的不同的網址，向後端的網頁伺服器發送請求 (Request)，而伺服器接收到瀏覽器給的請求後，就會回應相對應的內容給瀏覽器，讓瀏覽器將內容渲染出來，以上的機制就稱為網站路由。這是傳統後端路由的概念。這種也就是後端路由，或稱為伺服器端路由（Server-side Routing）
相對於前面的後端路由，前端路由除了在第一次載入時向伺服器提出請求外，網頁載入後的後續頁面切換，都不透過伺服器而是在瀏覽器端進行。一般稱呼這種網頁為SPA（Single Page Application）。Vue Router即屬於這個範疇。
Vue Router
Vue Router 是 Vue.js 官方提供的前端路由管理器。截至目前來說最新版本為 v4.0.12。在使用上要注意的是由於Vue3.0的底層已經改寫過，而 Vue Router v3 以前的版本無法支援新版的 Vue ，請使用Vue Router v4.x的版本，若您的專案目前仍使用的是 Vue 2.x 版本，請務必選用 Vue Router v3.x 。
安裝Vue Router
依照情境有下面幾種安裝方式。
- Vue Cli安裝
- 事後追加安裝
- CDN安裝
以下分別說明。
1.透過Vue Cli安裝
如果您是在建立新專案的時候已經確定要使用Vue Router時，可以利用這一篇介紹VueCli建立專案，並且在過程中（文章中「步驟2」的地方）選擇Router選項。
選擇了Router選項後， Vue CLI 會問你是否採用history模式，如果選擇Y，表示專案會採用history API來管理。Vue Router預設的模式為hash 模式（ # ），這表示網址會使用URL 的hash來模擬一個完整的URL，如果不想要很醜的hash，我們可以用路由的 history 模式。實際安裝的細節可以參考這一篇「使用Vue Cli 建立Vue Router 專案」說明。
2.事後追加Vue Router
如果您是在建立專案之後，才決定要增加路由的功能。已透過Vue Cli建立的Vue專案，在這時候由於尚未具備Vue Router的安裝。可以在終端機裡面執行下面的指令：
vue add router@next請注意，若在router後面加上『 @next 』，即可安裝最新版本的Vue Router。
若尚未安裝VueCli時，也可以透過下面方式安裝：
npm install --save vue-router@next3.使用CDN安裝Vue Router
除了上面的方式外，也可以使用CDN的方式直接引入Vue Router。
<script src="<https://unpkg.com/vue-router@4>"></script>以上幾個安裝的方式，大家可以依照個案需求，選擇適當的方式來安裝。
開始使用Vue Router
基本配置流程
在使用上可以分為HTML與JavaScript兩個部分的基本配置方式：
JavaScript部分
在這個部分，我們需要依照下面的順序逐步的進行：
- 定義個頁面的Vue元件；
- 定義路徑與前面Vue元件的關係；
- 初始化並建立Vue Router物件；
- 將Vue Router物件添加入Vue實例中。
以下就使用Vue CDN與Vue Router CDN的狀況做為例子，如果想要暸解在Vue Cli下面建立Vue Router 的情形，後續將撰文說明：
## 定義個頁面的Vue元件
假設網站需要一個「關於我們」的單元，可以使用下面方式定義一個物件。
const About ={ template:
`<div>
<h1>關於我們</h1>
<p>歡迎來到我們的網站。</p>
</div>`
}為了方便說明，在這裡將About物件簡化為只呈現一個標題與一小段內文的模板。
## 定義路徑與前面Vue元件的關係
接著我們使用一個array陣列，來定義路徑與前面元件的關係。這個陣列可以取名為 routes（習慣上採用複數 s 命名，代表陣列中有很多route物件，雖然在這裡只示範一個，未來可以依照同樣方式增加更多的對應關係）
routes = [{name: 'About', path: '/about', component:About}]在定義時，每個route物件可以有三組key-value值。包括name、path與component。name為路由的名稱，可以使用名稱指定路由。path為URL位置。component為當到達指定URL時，需要對應的元件。
# 初始化並建立Vue Router實例
建立一個router實例。並且將上一步的 routes 陣列加入這個物件裡面。
const router = new VueRouter({
routes
})router實例中的 routes為routes: routes的簡稱。除了將routes陣列加入實例之外，您也可以加上其他的 options。例如：mode、base、fallback、linkActiveClass、linkExactActiveClass、scrollBehavior 等options（如下表）。
# 將Vue Router實例添加入Vue實例中
最後我們要將Vue Router實例添加入Vue實例中。下面以Vue2.x為例：
new Vue({ el:'#app',
router, data:{
略...
}})
可以直接將步驟三的router實例加進Vue實例中。
HTML部分
HTML為使用者介面，在這裡會用到下面的兩個標籤：
- <router-link>：用來指定路徑，
- <router-view>：用來顯示內容。
安裝了 Vue Router 之後，接著我們需要在網頁加入<router-view>來當作 Route 的進入點，並且使用<router-link>來產生對應的連結。
在<router-link>中使用to屬性用來處理目標URL，<router-link>在經過編譯之後，會變成<a>標籤。<router-view>則是用來渲染內容的地方。使用方式如下：
<router-link to="/about" class="nav-link">關於我們</router-link>在to的地方除了直接指定route的路徑 （route path）外，也可以指定route的名稱（route name）。
<router-link :to="{name:'About'}" class="nav-link">關於我們</router-link>請注意，當指定的是route的名稱時，在這種狀況下 to 就需要採用v-bind的方式（ :to="{name:'About'}" ）。
接著，<router-view> 要放在 id為app 的<div>元素裡面。#app 為Vue實例掛載的位置（ el:'#app' ）。
<div id="app">
略...
<router-view></router-view>
略...
</div>如此設定後，一旦使用者點選<router-link>，就會透過router將對應結果顯示在<router-view>的地方。（這<router-view> 給人的感覺就像是html裡面的iframe功能，然而透過iframe拉進來的頁面本身，仍然是一個完整的HTML檔案，有<head>與<body>。）
結語
router的概念對於前端來說越顯重要，SPA可說是建立在router的基礎上。本篇僅說明了Vue Router的基礎功能，可以說只是Vue Router的起手式。然而在這Vue2.x與Vue3.x專案並存的時代裡，對於初次使用者來說，還是會有些搞不清楚。在此特別整理一下，藉以提醒自己在使用Vue Router時不要用錯。後續也將繼續介紹Vue Router其他的進階功能。
