前端路由與後端路由&hash模式與 history模式

前端路由與後端路由

魯迅曾經說過，這個世界上本沒有路，走的人多了便成了路，魯迅還說過，路由本不分前端路由和後端路由，隨着單頁應用（SPA）的出現，便有了前端路由。

魯迅：這話我沒說過

好吧，這的確不是魯迅說的，但路確實是走出來的，前端路由也確實是隨着單頁應用的不斷普及，先後端分離而演化出來的。

論前端路由的進化史

最開始只有路由這個名詞，路由就是一個單純的URL，也就是一個連接地址，在瀏覽器裏輸入這個連接地址向服務器發起請求，服務器根據這個地址拿到對應的html文件返回給瀏覽器渲染（若html文件中引入了外部的js或css或其餘文件資源，瀏覽器再一次發送請求，服務器再依次返回）。用戶首次訪問一個網站，輸入地址後回車發起請求，服務器響應返回首頁的html文件，瀏覽器渲染；用戶點擊詳情頁，瀏覽器發起請求，服務器響應返回詳情頁html文件；用戶點擊我的主頁，瀏覽器發起請求，服務器響應返回我的主頁的html文件......，然而有時候，這個html文件並不小，或者很大，甚至龐大！這就致使服務器負荷重，頁面加載緩慢，用 戶體驗差。

因此這整個過程當中，存在着不平等。。。

前端：我只管往出丟路由,其餘的與我無瓜！

服務器：

爲了加強用戶體驗，讓用戶更快更流暢的訪問網站，亦爲了追求平等，單頁應用出現了。單頁應用就是整個項目只有一個html文件，用戶首次訪問網站，服務器返回一個html文件以及打包好的js文件和css文件，若是你不刷新，這將是惟一一次給你返回html文件。當你切換頁面時，只會請求接口返回JSON數據，渲染頁面。（若是使用了路由按需加載，每次切換頁面時會加載對應的組件。）這時候點擊詳情頁或者我的主頁時瀏覽器並不會發送請求讓服務器返回對應的詳情頁.html或我的主頁.html。那瀏覽器是怎麼知道點擊詳情頁或者我的主頁去渲染不一樣的界面呢？沒錯，依據就是前端路由。因此使用vue的時候須要引入vue-router，使用angular的時候須要引入ui-router。

hash 模式和 history 模式

瀏覽器對象（Browser）

Browser包含window對象，Navigator對象，Screen對象，History對象，Location對象等，其中window對象表示瀏覽器打開的窗口；Navigator對象包含瀏覽器的相關信息，其經常使用的屬性有navigator.userAgent獲取瀏覽器內核等信息；Screen對象包含客戶端顯示屏幕的信息，如screen.height或screen.width獲取寬高；history對象包含訪問過的URL，是window對象的一部分，有三個方法，back(),forward(),go(),調用這三個方法，瀏覽器會加載對應頁面；location對象包含當前URL有關的信息，是window對象的一部分，經常使用的屬性有location.hash返回URL的hash值，location.port返回當前使用的端口號。詳細信息可查閱文檔

hash和history只是瀏覽器的兩個特性

hash

hash即‘#/xxx’，是瀏覽器用來作頁面定位的，例如a標籤的描點功能，使用 window.location.hash 能夠讀取當前頁面的hash值,也能夠寫入，hashchange事件能夠響應hash的的改變，有兩個特色： 一、改變hash值，瀏覽器不會重載頁面，但會在歷史訪問裏增長一條紀錄 二、刷新重載頁面時，hash值不會傳給服務器端，瀏覽器訪問的URL是http://wenyan.51easymaster.com/#/WYHome， 實際上向服務器發起請求的URL是http://wenyan.51easymaster.com/

vue利用了瀏覽器的hash特性實現了前端路由（vue-router hash模式）。 當用戶訪問http://wenyan.51easymaster.com 時，服務器返回一個html文件（以及打包好的js文件和css文件），當訪問 wenyan.51easymaster.com/#/WYHome 和http://wenyan.51easymaster.com/#/answerDetail 時瀏覽器就會根據hash值（#/WYHome 和 #/answerDetail）請求對應的JSON數據渲染對應頁面。整個項目只有一個html文件，vue-router內部監聽了hashchange事件響應hash值改變，根據hash值的不一樣渲染不一樣的視圖。

history

HTML5 History Interface 中history對象新增了兩個方法 pushState() 和 popState()。 這兩個方法應用於瀏覽器的歷史記錄棧，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會重載頁面。

vue-router的 history 模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。使用history模式，URL是http://wenyan.51easymaster.com/user/id 這個樣子的，使用history模式要注意的是前端的 URL 必須和實際向後端發起請求的 URL 一致並且還須要後臺配置支持，如訪問http://wenyan.51easymaster.com/user/id 時若是後端缺乏對 /user/id 的路由處理，將返回 404 錯誤。官方給出的方案是你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。具體請參閱文檔

over

若有錯誤，歡迎指正~