前端路由簡介以及vue-router實現原理

後端路由簡介

路由這個概念最早是後端出現的。在之前用模板引擎開發頁面時，常常會看到這樣

http://www.xxx.com/login

大體流程能夠當作這樣：

1. 瀏覽器發出請求
2. 服務器監聽到80端口（或443）有請求過來，並解析url路徑
3. 根據服務器的路由配置，返回相應信息（能夠是 html 字串，也能夠是 json 數據，圖片等）
4. 瀏覽器根據數據包的 Content-Type 來決定如何解析數據

簡單來講路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能。

前端路由

1. hash 模式

隨着 ajax 的流行，異步數據請求交互運行在不刷新瀏覽器的狀況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應用。單頁應用不只僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，爲了實現單頁應用，因此就有了前端路由。
相似於服務端路由，前端路由實現起來其實也很簡單，就是匹配不一樣的 url 路徑，進行解析，而後動態的渲染出區域 html 內容。可是這樣存在一個問題，就是 url 每次變化的時候，都會形成頁面的刷新。那解決問題的思路即是在改變 url 的狀況下，保證頁面的不刷新。在 2014 年以前，你們是經過 hash 來實現路由，url hash 就是相似於：

http://www.xxx.com/#/login

這種 #。後面 hash 值的變化，並不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發hashchange 這個事件，經過這個事件咱們就能夠知道 hash 值發生了哪些變化。而後咱們即可以監聽hashchange來實現更新頁面部份內容的操做：

function matchAndUpdate () {
   // todo 匹配 hash 作 dom 更新操做
}

window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年後，由於HTML5標準發佈。多了兩個 API，pushState 和 replaceState，經過這兩個 API 能夠改變 url 地址且不會發送請求。同時還有 popstate 事件。經過這些就能用另外一種方式來實現前端路由了，但原理都是跟 hash 實現相同的。用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但由於沒有 # 號，因此當用戶刷新頁面之類的操做時，瀏覽器仍是會給服務器發送請求。爲了不出現這種狀況，因此這個實現須要服務器的支持，須要把全部路由都重定向到根頁面。

function matchAndUpdate () {
   // todo 匹配路徑 作 dom 更新操做
}

window.addEventListener('popstate', matchAndUpdate)

Vue router 實現

咱們來看一下vue-router是如何定義的：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

new Vue({
  router
  ...
})

能夠看出來vue-router是經過 Vue.use的方法被注入進 Vue 實例中，在使用的時候咱們須要全局用到 vue-router的router-view和router-link組件，以及this.$router/$route這樣的實例對象。那麼是如何實現這些操做的呢？下面我會分幾個章節詳細的帶你進入vue-router的世界。(閱讀源碼是有點枯燥，可是帶着問題去了解，就感受頗有意思。若是你對 vue-router 的實現機制也存在一些疑問，能夠一塊兒探討交流)

vue-router 實現 -- install

vue-router 實現 -- new VueRouter(options)

vue-router 實現 -- HashHistory

未完待續...