淺談前端路由的概念

1.Web路由

1.1 后端路由

Web路由的概念簡單來說就是根據(jù)不同URL渲染不同的頁面。在前后端不分離的時代，路由往往指的是后端路由（服務(wù)端路由），即當(dāng)服務(wù)端接收到客戶端發(fā)來的 HTTP 請求，就會根據(jù)所請求的相應(yīng) URL，進(jìn)行文件讀取，數(shù)據(jù)庫讀取等操作，使用模板引擎將相應(yīng)結(jié)果與模板結(jié)合后進(jìn)行渲染，將渲染完畢的頁面發(fā)送給客戶端。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：seo友好，爬蟲爬取到的頁面就是最終的渲染頁面。

缺點(diǎn)：每次發(fā)起請求都要刷新頁面，用戶體驗(yàn)不好，服務(wù)器壓力大。

1.2 前端路由

說到前端路由，必須先提一下Ajax與SPA。Ajax技術(shù)的興起促使了 SPA—單頁面應(yīng)用的出現(xiàn)，由于Ajax可以做到頁面的局部更新，因此單頁應(yīng)用頁面的交互和頁面的跳轉(zhuǎn)都是無刷新的，無刷新就意味著無需處理html文件的請求，因此用戶體驗(yàn)很好。但相應(yīng)的，由于頁面數(shù)據(jù)需要通過Ajax獲取，因此爬蟲獲取到的html只是模板而不是最終的渲染頁面，因此會不利于seo。為了實(shí)現(xiàn)單頁應(yīng)用，所以就有了前端路由。

前端路由的概念簡單來講就是，當(dāng)路由發(fā)生變化，不請求服務(wù)端，而是通過js的方式修改dom（組件替換），并發(fā)送Ajax獲取數(shù)據(jù)來達(dá)到頁面跳轉(zhuǎn)的效果。因此實(shí)現(xiàn)前端路由有兩個關(guān)鍵點(diǎn)：

如何改變url不讓瀏覽器向服務(wù)器發(fā)送請求。

如何監(jiān)聽到url的變化，并執(zhí)行對應(yīng)的操作

這里就要引出實(shí)現(xiàn)前端路由的兩種路由模式：hash模式和history模式

2.前端路由的實(shí)現(xiàn)模式

2.1 hash模式

概念：hash 就是指 url 后的 # 號以及后面的內(nèi)容

特點(diǎn)：hash模式有以下幾個特點(diǎn)

hash值的變化不會導(dǎo)致瀏覽器向服務(wù)器發(fā)送請求，不會引起頁面刷新。

hash值變化會觸發(fā)hashchange事件。

hash值改變會在瀏覽器的歷史中留下記錄，使用瀏覽器的后退按鈕，就可以回到上一個hash值。

hash永遠(yuǎn)不會提交到服務(wù)端，即使刷新頁面也不會。

由此可見hash模式的特點(diǎn)完全可以滿足前端路由的實(shí)現(xiàn)需求，所以在 H5 的 history 模式出現(xiàn)之前，基本都是使用 hash 模式來實(shí)現(xiàn)前端路由。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn):

1、兼容性好，支持低版本和IE瀏覽器。

2、實(shí)現(xiàn)前端路由無需服務(wù)端的支持。

缺點(diǎn):

URL帶#，路徑丑

2.2 history模式

概念：在 HTML5 之前，瀏覽器就已經(jīng)有了 history 對象來控制頁面歷史記錄跳轉(zhuǎn)，主要有以下方法。

history.forward()：前進(jìn)

history.back()：后退

history.go(n)：加載歷史列表中的某個具體的頁面

在 HTML5 的規(guī)范中，history 新增了以下幾個 API：pushState（追加） 和 replaceState（替換），通過這兩個 API 可以改變 url 地址且不會發(fā)送請求，同時還新增popstate 事件。通過這些API就能用另一種方式來實(shí)現(xiàn)前端路由，其實(shí)現(xiàn)原理跟與hash模式 實(shí)現(xiàn)類似，只是用了 HTML5 的實(shí)現(xiàn)，單頁面應(yīng)用的 url 不會多出一個#，會更加美觀。

關(guān)于History模式有兩點(diǎn)需要說明：

history模式如何監(jiān)聽路由變化

history模式下，瀏覽器的前進(jìn)后退（history.back(), history.forward()等）會觸發(fā)popstate 事件，但pushState，replaceState 并不會觸發(fā)popstate事件。因此要實(shí)現(xiàn)路由變化的偵聽，我們需要重寫這兩個方法，可以通過事件中心（EventBus）添加事件通知。

history模式需要后端支持

由于history模式?jīng)]有 # 號，所以當(dāng)用戶手動刷新或直接通過url進(jìn)入應(yīng)用時，瀏覽器還是會給服務(wù)器發(fā)送請求。但服務(wù)端無法識別這個 url ，因此為了避免出現(xiàn)這種情況，history模式需要服務(wù)端的支持，即服務(wù)端需要把匹配不到的所有路由都重定向到根頁面。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

路徑好看

缺點(diǎn)：

1、兼容性差，不能兼容IE9。

2、需要服務(wù)端支持。