淺析使用vue-router實現前端路由的兩種方式

關於vue-router

因爲最近的項目中一直在使用vue，因此前端路由方案也是使用的官方路由vue-router，以前在angularJS項目中也是用過UI-router，感受大同小異，不過很顯然vue-router更友好一些。本文就以vue-router爲例淺析我所理解的前端路由，具體用法和一些基本語法就不一一介紹了，官方文檔說的更加清晰

關於前端路由

據我所知，在如今這些MVC和MVVM框架興起以前，是不存在前端路由的，頁面之間的跳轉是由後臺控制的。隨着先後端分離和單頁面應用（SPA）的興起和WEB項目複雜度的增長，再加上前面這些框架的支持，慢慢前端路由也就成爲了現實。單頁面應用的特色就是能夠在改變URL在不從新請求頁面的狀況下更新頁面視圖。

"更新視圖但不從新請求頁面"是前端路由的原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有兩種方式

• 利用URL中的hash（"#"）
• 利用History interface在 HTML5中新增的方法

下面咱們就來看看vue-router是如何經過這兩種方式來實現前端路由的

vue-router實現前端路由的方法和對比

使用過vue-router的都知道，在vue-router中有mode這樣一個參數，這個參數的可選值有"hash"、 "history"、"abstract"

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

對應咱們上面講到的兩種方式來講，hash就是第一種方式，history就是第二種方式，而第三種是在nodejs下的默認實現方式。

那"hash"和"history"這兩種方式各有什麼優劣呢？

• 首先在vue-router中默認使用的是hash這種方式，由於這種方式雖然帶個#有點醜（官方居然都這樣說），可是不存在兼容性問題
• 而history因爲底層的實現根據MDN的介紹，調用history.pushState()，因此存在瀏覽器兼容性問題。
• 若是不考慮兼容性問題的話，pushState確定比只修改hash值更增強大，由於能夠設置任意同源URL
• pushState能夠設置和當前URL如出一轍，這樣也會把記錄添加到棧中，而hash設置的新值必須和原來不同

• 還有，就算不考慮兼容問題的話，history模式還有一個問題，就是history模式會將URL修改的和正常請求後端的URL同樣

  http://oursite.com/user/id

  這樣的話若是後端沒有配置對應的user/id這樣一個地址的話就會返回404，官方推薦的解決辦法是在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。同時這麼作之後，服務器就再也不返回 404 錯誤頁面，由於對於全部路徑都會返回 index.html 文件。爲了不這種狀況，在 Vue 應用裏面覆蓋全部的路由狀況，而後在給出一個 404 頁面。（這種方案我還沒實踐過，有機會要實踐一下）

• 因此綜合考慮來講用在一些中後臺項目中的話通常直接就採用hash這種默認方式了，而前臺項目的話看需求選擇使用history仍是hash

後記

在寫這篇文章以前看了一個大神寫的分析vue-router的文章，每得出一個結論以前都是截取了相應的源文件，真的是作到了 有理有據，實在佩服。我文中之因此沒引用是由於實在沒有通讀過vue-router的源碼，也還不是看的太懂，因此就不班門弄斧了，可是在看這篇文章的過程當中也慢慢打消了一些對源代碼的恐懼，原來源代碼也沒那麼晦澀難懂，認真看仍是能看懂大部分的，因此之後移動要多多讀這樣的文章，慢慢試着去看看源代碼，那樣獲得的結論纔是最有一句的，而不是人云亦云，加油！

參考文章：

• 【源碼拾遺】從vue-router看前端路由的兩種實現
• VueJs路由跳轉——vue-router的使用