從頭開始學Vue-Router

前言

Vue-Router提出來是爲了解決什麼問題，跟之前寫a標籤或者從新打開一個瀏覽器窗口有什麼不一樣，有什麼優點，它的實現原理是什麼等等帶着這些問題咱們來深刻了解一下Vue-Router。

背景

之前咱們打開頁面通常都是用a標籤或location.herf或window.open等方式，咱們發現有時候每打開一個頁面都會有點卡，由於咱們每打開一個瀏覽器窗口都會從新加載所須要的資源包括公共css、js、圖片等等，不少頁面都加載的是一樣的公共資源，這樣子就會形成瀏覽器性能的大量消耗，而且前端重複的代碼很是多，由於代碼不能複用，好比頭部或者底部不少html文件都要寫一份，很不利於維護，特別是遇到複雜項目的時候，工做量成倍增長。爲了注重用戶體驗(下降瀏覽器性能損耗)、開發大型複雜的項目(組件化，不須要重複寫大量的代碼)這兩個主要難題的時候，單頁面應用被提了出來。

單頁面應用(SPA)

單頁面應用是指只有一個頁面的應用，在瀏覽器中運行期間不會從新加載頁面，以後全部的交互操做都在一個頁面上完成，這些都是經過vue-router切換不一樣的vue組件來顯示不一樣的組件內容。公共資源(js、css等)僅需加載一次且一次所有加載，因此會有首屏問題，就是第一次打開頁面有點慢，多頁面應用是按需加載公共資源，因此沒有首屏問題。 如圖：

從上圖咱們能夠看到Page-One、Page-Two、Page-Three共用一個Header和Footer。

多頁面應用(MPA)

多頁面跳轉從新加載頁面，所需公共資源(js、css等)會從新加載，因此不少頁面都會加載相同的公共資源，形成瀏覽器性能的巨大浪費。 如圖：

從上圖咱們能夠看到Page-One、Page-Two、Page-Three每一個頁面都須要分別寫一個Header和Footer形成大量代碼重複。

具體對比分析：

	單頁面應用	多頁面應用
組成	一個index.html頁面和若干組件組成	多個完整頁面構成
資源共用(css、js、img等)	共用，只須要在index.html頁面加載	不共用，每一個頁面都須要加載
刷新方式	頁面局部刷新或更改	整頁刷新
url模式	a.com/#/pageone a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用戶體驗	頁面組件的切換快，用戶體驗好	頁面之間的切換加載緩慢，流暢度不夠，用戶體驗比較差
轉場動畫	容易實現	沒法實現
數據傳遞	容易	依賴url傳參、cookie、localStorage等
搜索引擎優化(SEO)	須要單獨方案、實現較爲困難、不利於SEO檢索，可利用服務器端渲染(SSR)優化	實現方法簡易
試用範圍	高要求的體驗度、追求界面流暢的應用	適用於追求高度支持搜索引擎的應用
開發成本	較高，常需藉助專業的框架	較低，但頁面重複代碼多
維護成本	相對容易	相對複雜

從上圖咱們能夠看到單頁面應用的優點和劣勢：

單頁面應用的好處

• 用戶體驗好，快，內容的改變不須要從新加載整個頁面，基於這一點SPA對服務器壓力較小。從性能和用戶體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向服務器發送請求，而後服務器再響應請求，這個過程確定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對於用戶體驗來講會有至關大的提高。
• 單頁面應用沒有頁面之間的切換，就不會出現"白屏現象"，也不會出現假死並有"閃爍"現象。
• 良好的先後端分離。後端再也不負責模版渲染、輸出頁面工做，只須要出數據就能夠，後端API通用化，即同一套後端程序代碼，不用修改就能夠用於web界面、手機、平板等客戶端。

單頁面應用的缺點

• 首次加載耗時比較多：爲實現單頁Web應用功能及顯示效果，須要在第一次打開頁面的時候將全部公共資源JavaScript、CSS、圖片等一塊兒加載，因此會有首屏問題，就是第一次打開頁面有點慢。
• SEO難度較高：搜索引擎爬蟲工具只會爬取到後端返回的html內容(不支持ajax數據的爬取也就是不能爬取接口返回的數據)，單頁面應用只會在第一次進入頁面的時候會向後端請求html文件，這時候會被搜索引擎爬蟲工具檢索到，可是在切換組件的時候是不須要向後端發送請求html文件的，因此是沒法被爬蟲工具檢索到的，多頁面應用每次頁面跳轉後端服務器都會返回一個新的html文檔，會被爬蟲工具檢索到。 針對以上兩個缺點vue又提出了SSR來解決。

Vue-Router原理

這裏的路由是SPA的路徑管理器。Vue-Router是Vue.js官方的路由插件，它和Vue.js是深度集成的，適合於構建單頁面應用。Vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面，是經過超連接來實現頁面跳轉，在Vue-Router單頁面應用中，則是路徑之間的切換，也就是組件的切換。Vue路由的本質就是創建起hash路由和組件之間的映射關係。 單頁面應用的核心之一是更新視圖而不從新請求頁面，Vue-Router在實現單頁面應用前端路由時，提供了兩種方式：Hash模式和History模式，根據mode參數來決定採用哪種方式，這兩種方式都不會讓頁面從新加載。

Hash模式：

咱們常常在url中看到#，這個#有兩種做用，一種用來實現錨點功能，一種用來作hash路由，hash是#號後面的部分，單單改變#後的部分是不會刷新頁面，不會從新加載頁面，同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一條記錄，使用後退按鈕就能夠回到上一個頁面，Vue-Router就是利用這一點來實現前端路由。主要原理是經過監聽 # 後的 URL 路徑標識符的更改而觸發的瀏覽器 的hashchange 事件，而後經過獲取 location.hash 獲得當前的路徑標識符，再進行一些路由跳轉的操做。

History模式

因爲hash模式會在url中自帶#，若是不想要很醜的 hash，咱們能夠用路由的 history 模式，只須要在配置路由規則時，加入"mode: 'history'"，這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會當即向後端發送請求。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
複製代碼

當你使用 history 模式時，URL 就像正常的 url，如 yoursite.com/user/id，看上去… oursite.com/user/id就會返回 404，這就很差看了。因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]
複製代碼

此處就設置若是URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面。

Vue-Router能夠用來管理哈希路由、傳遞數據

路由源碼：juejin.im/post/5cd8d6… mp.weixin.qq.com/s/xVDUtqA-V…