關於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一樣
這樣的話如果后端沒有配置對應的user/id這樣一個地址的話就會返回404，官方推薦的解決辦法是在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。同時這么做以后，服務器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件。為了避免這種情況，在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。（這種方案我還沒實踐過，有機會要實踐一下）http://oursite.com/user/id - 所以綜合考慮來說用在一些中后台項目中的話一般直接就采用hash這種默認方式了，而前台項目的話看需求選擇使用history還是hash
后記
在寫這篇文章之前看了一個大神寫的分析vue-router的文章，每得出一個結論之前都是截取了相應的源文件，真的是做到了 有理有據，實在佩服。我文中之所以沒引用是因為實在沒有通讀過vue-router的源碼，也還不是看的太懂，所以就不班門弄斧了，但是在看這篇文章的過程中也慢慢打消了一些對源代碼的恐懼，原來源代碼也沒那么晦澀難懂，認真看還是能看懂大部分的，所以以后移動要多多讀這樣的文章，慢慢試着去看看源代碼，那樣得到的結論才是最有一句的，而不是人雲亦雲，加油！
參考文章：