vue-router解析，vue-router原理解析

前言：新一季面試季，從新整理一些知識點；

本文詳細說明本身對vue-router原理的理解；

 

參考：

• 源碼：vuejs/vue-router v2.2.1 - github
• 文檔：vue-router 官方中文教程
• 參考博客 ：http://cnodejs.org/topic/58d680c903d476b42d34c72b

 

 

VueRouter包括三個主要組成部分 —— VueRouter、router-view和 router-link：

• VueRouter ：路由器類，根據路由請求在路由視圖中動態渲染選中的組件
• router-link ：路由連接組件，聲明用以提交路由請求的用戶接口
• router-view：路由視圖組件，負責動態渲染路由選中的組件

前端路由直接找到與地址匹配的一個組件或者對象而後進行渲染，

實現這一點主要是兩種方式:

1.Hash: 經過改變hash值

2.History: 利用history對象新特性

history模式須要服務端的配合，而hash模式不須要

而在vue-router中，它提供mode參數來決定採用哪種方式，選擇流程以下:

默認Hash-->若是瀏覽器支持History新特性改用History-->若是不在瀏覽器環境則使用abstract

選好mode後建立history對象(HashHistory或HTML5History或AbstractHistory)

可見最被青睞的是History模式，理由是: "#"太醜了。。。

 

基本方法分析:

Hash

1.push()

功能: 設置新的路由添加歷史記錄並更新視圖,經常使用狀況是直接點擊切換視圖

調用流程:

1 $router.push() //顯式調用方法

2 HashHistory.push() //根據hash模式調用,設置hash並添加到瀏覽器歷史記錄（window.location.hash= XXX）

3 History.transitionTo() //開始更新

4 History.updateRoute()  //更新路由

5 {app._route= route} 

6 vm.render() //更新視圖

 

2.replace

功能: 替換當前路由並更新視圖，經常使用狀況是地址欄直接輸入新地址

流程與push基本一致

但流程2變爲替換當前hash （window.location.replace= XXX）不懂此方法的可見: http://www.w3school.com.cn/jsref/met_loc_replace.asp

 

3.監聽地址欄變化

在setupListeners中監聽hash變化(window.onhashchange)並調用replace

 

History

1.push

與hash模式相似，只是將window.hash改成history.pushState

2.replace

與hash模式相似，只是將window.replace改成history.replaceState

3.監聽地址變化

在HTML5History的構造函數中監聽popState（window.onpopstate）

 

兩種模式對比

History模式的優勢:

1.History模式的地址欄更美觀。。。

2.History模式的pushState、replaceState參數中的新URL可爲同源的任意URL（可爲不一樣的html文件），而hash只能是同一文檔

3.History模式的pushState、replaceState參數中的state可爲js對象，能攜帶更多數據

4.History模式的pushState、replaceState參數中的title能攜帶字符串數據（固然，部分瀏覽器，例如firefox不支持title，通常title設爲null，不建議使用）

缺點:

對於單頁面應用來講，理想的場景是僅僅在進入應用時加載頁面（例如index.html）,後續的網絡操做靠ajax完成，

而不會從新請求頁面。

但當用戶直接在用戶欄輸入地址時則會從新請求，當地址帶有參數時二者狀況不同

Hash 例如: xxx.com/#/id=5 HTTP請求不會包含後面的hash值，因此請求的仍然是 xxx.com,沒有問題

History 例如:  xxx.com/id=5 這時請求的即是xxx.com/id=5，如後端沒有配置對應id=XXX的路由處理，則會返回404錯誤。

官方推薦的解決辦法是在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。同時這麼作之後，服務器就再也不返回 404 錯誤頁面，由於對於全部路徑都會返回 index.html 文件。爲了不這種狀況，在 Vue 應用裏面覆蓋全部的路由狀況，而後在給出一個 404 頁面。或者，若是是用 Node.js 做後臺，可使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 fallback。