12-vue-router
一、認識路由
1、什麼是路由
路由（routing）就是通過互聯的網路把資訊從源地址傳輸到目的地址的活動 — 維基百科
路由器提供了兩種機制， 路由和轉發
- 路由是決定資料包從來源到目的地的路徑
- 轉發將輸入端的資料轉移到合適的輸出端
2、網站發展的幾個階段
(1)後端路由階段
什麼是後端路由
早期的網站開發，整個 HTML 頁面都是是由伺服器來渲染的，伺服器直接生產渲染好對應的 HTML 頁面, 返回給客戶端進行展示
但是, 伺服器如何處理一個網站的諸多頁面呢?
首先，一個頁面會有自己對應的網址, 也就是 URL，客戶端發生請求時，URL 會發送到伺服器，伺服器通過正則對該URL 進行匹配且最後交給
Controller 進行處理，Controller 進行各種處理後，最終生成 HTML 或者資料，返回給前端，這就完成了一個IO操作，這種操作, 就是後端路由；
後端路由的優點
當頁面中需要請求不同的路徑內容時，交給伺服器來進行處理, 伺服器渲染好整個頁面，並且將頁面返回給客戶端，
這種情況下渲染好的頁面，不需要單獨載入任何的 js 和 css，可以直接交給瀏覽器展示，這樣也有利於 SEO 的優化
後端路由的缺點
- 整個頁面的模組都要由後端人員來編寫和維護，工作量太大
- 前端開發人員如果要開發頁面，需要通過 PHP 和 Java 等語言來編寫頁面程式碼，增加了額外的學習成本
- HTML 程式碼和資料以及對應的邏輯混在一起,，不利於編寫和維護
(2)前端路由階段
前端路由的核心：改變URL，但是頁面不進行整體的重新整理
前後端分離階段
隨著 Ajax 的出現，有了前後端分離的開發模式：後端只提供 API 來返回資料，前端通過 Ajax 獲取資料，並且可以通過 JavaScript 將資料渲染到頁面中
優點：
- 前後端責任變得很清晰，後端專注於資料上, 前端專注於互動和視覺化上
- 當移動端(iOS/Android)出現後，後端不需要進行任何處理， 依然使用之前的一套API即可
單頁面富應用階段
單頁面富應用，即單頁Web應用（single page web application，SPA），就是隻有一張 Web 頁面的應用，是載入單個 HTML 頁面並在使用者與應用程式
互動時動態更新該頁面的 Web 應用程式;
簡單理解：就是在前後端分離的基礎上加了一層前端路由
SPA的特點
- 速度：更好的使用者體驗，讓使用者在 web app 感受 native app 的速度和流暢
- ·MVVM：經典 MVVM 開發模式，前後端各負其責
- ·ajax：重前端，業務邏輯全部在本地操作，資料都需要通過AJAX同步、提交
- ·路由：在 URL 中採用 # 號來作為當前檢視的地址，改變 # 號後的引數，頁面並不會過載
SPA 缺點
- 首屏渲染等待時長： 必須得載入完畢，才能渲染出首屏 ；
- eo不友好：爬蟲只能拿到一個 div，認為頁面是空的，不利於 seo ；
- 次載入耗時多：為實現單頁Web應用功能及顯示效果，需要在載入頁面的時候將 JavaScript、CSS 統一載入，部分頁面可以在需要的時候載入，
所以必須對 JavaScript 及 CSS 程式碼進行合併壓縮處理，如果使用第三方庫，建議使用一些大公司的 CDN，因此頻寬的消耗是必然的；
SPA 優點
- 良好的互動體驗 ：使用者不需要重新重新整理頁面，獲取資料也是通過 Ajax 非同步獲取，頁面顯示流暢 ；
- 良好的前後端工作分離模式：單頁 Web 應用可以和 RESTful 規約一起使用，通過 REST API 提供介面資料，並使用 Ajax 非同步獲取，這樣有助於分離
客戶端和伺服器端工作，更進一步，可以在客戶端也可以分解為靜態頁面和頁面互動兩個部分 ；
- 減輕伺服器壓力：伺服器只用出資料就可以，不用管展示邏輯和頁面合成，吞吐能力會提高几倍 ；
- 用一套後端程式程式碼 ：不用修改後端程式程式碼就可以同時用於 Web 介面、手機、平板等多種客戶端；
3、改變URL，頁面不重新整理
(1)URL的hash
URL 的 hash 也就是錨點(#)，本質上是改變 window.location 的 href 屬性，可以通過直接賦值 location.hash 來改變 href，但是頁面不發生重新整理；
(2)HTML5的history模式
history 介面是 HTML5 新增的，它有五種模式改變 URL 而不重新整理頁面；
history.pushState()
history.replaceState()
history.forward()
history.back()
history.go()
history.back() 等價於 history.go(-1)
history.forward() 則等價於 history.go(1)
二、vue-router的基本使用
目前前端流行的三大框架，都有自己的路由實現：
- Angular：ngRouter
- React：ReactRouter
- Vue：vue-router
vue-router 是 Vue.js 官方的路由外掛，它和 vue.js 是深度整合的，適合用於構建單頁面應用；
vue-router 是基於路由和元件的，路由用於設定訪問路徑, 將路徑和元件對映起來，在 vue-router 的單頁面應用中, 頁面路徑的改變就是元件的切換；
1、安裝vue-router
npm install vue-router --save在模組化工程中使用：
因為 vue-router 是一個外掛，所以可以通過 Vue.use() 來安裝路由功能
- 匯入路由物件，並且呼叫 Vue.use(VueRouter)
- 建立路由例項，並且傳入路由對映配置
- 在 Vue 例項中掛載建立的路由例項
2、使用vue-router
(1)建立路由元件
建立router例項
(2)配置路由對映: 元件和路徑對映關係
新建兩個元件：
為元件配置路由對映關係：
使用路由: 通過<router-link>和<router-view>
<router-link>: 該標籤是一個 vue-router 中已經內建的元件, 它預設會被渲染成一個<a>標籤<router-view>: 該標籤會根據當前的路徑，動態渲染出不同的元件
npm run dev 結果：
3、路由的預設值和修改history模式
(1)路由預設值
預設情況下, 進入網站的首頁，我們希望 <router-view> 渲染首頁的內容，但是在上面的實現中，預設沒有顯示首頁元件，必須讓使用者點選才可以；
如何可以讓路徑預設跳到到首頁，並且<router-view>渲染首頁元件呢?
只需要在index.js中多配置一個對映就可以了：
這樣，開啟頁面時，就會預設顯示首頁的內容了；
(2)history模式
前面說過改變路徑的方式有兩種：
- URL 的 hash
- HTML5 的 history
預設情況下，Vue 路徑的改變使用的是 URL 的 hash，這樣顯示出的頁面的地址中有一個 # 號，不太美觀：
可以使用 HTML5 的 history 模式來進行改變，進行如下配置即可：
index.js
4、router-link補充
在前面的 <router-link> 中，我們只是使用了一個屬性:to，用於指定跳轉的路徑
<router-link> 還有一些其他屬性：
tag：tag 可以指定 <router-link> 之後渲染成什麼元件，預設是渲染為 <a></a> 標籤
replace: replace 不會留下 history 記錄，所以指定 replace 的情況下, 後退鍵返回不能返回到上一個頁面中：
active-class: 當<router-link>對應的路由匹配成功時，會自動給當前元素設定一個 router-link-active 的class
設定 active-class 可以修改預設的名稱：
<router-link to="/home" tag="button" replace active-class="active">首頁</router-link>
在進行高亮顯示的導航選單或者底部 tabbar 時，會使用到該類，比如想設定按鈕點選時變為紅色：
該 class 具體的名稱也可以通過 router 例項的屬性進行修改：
通常不會修改類的屬性, 會直接使用預設的 router-link-active 即可；
5、路由程式碼跳轉
有時候，頁面的跳轉可能需要執行對應的 JavaScript 程式碼，這個時候，就可以使用第二種跳轉方式了
比如，我們將程式碼修改如下:
