在講前端路由之前，先說下后端路由，以及為什么出現了前端路由。

后端路由： 瀏覽器在地址欄中切換不同的url時，每次都向后臺服務器發出請求，服務器響應請求，在后臺拼接html文件傳給前端顯示，java web中的jsp就是如此實現的。常用的后臺MVC模式的基本路由處理流程：瀏覽器輸入一個url請求，從中找到Controller和Action的值，將請求傳遞給Controller處理，Controller獲取Model數據對象，并且將Model傳遞給View,最后View呈現界面。

例如輸入一個url：localhost/home/index

其中localhost是域名，對應結構{controller}/{action}/{id}

前端路由： 隨著（SPA）單頁應用的不斷普及，前后端開發分離，目前項目基本都使用前端路由，在項目使用期間頁面不會重新加載。

前端路由目前主要有兩種方法：

1、利用url的hash,就是常用的錨點（#）操作，類似頁面中點擊某小圖標，返回頁面頂部，JS通過hashChange事件來監聽url的改變，IE7及以下需要輪詢進行實現。一般常用框架的路由機制都是用的這種方法，例如Angualrjs自帶的ngRoute和二次開發模塊ui-router，react的react-route,vue-route…

2、利用HTML5的History模式，使url看起來類似普通網站，以”/”分割，沒有”#”，但頁面并沒有跳轉，不過使用這種模式需要服務器端的支持，服務器在接收到所有的請求后，都指向同一個html文件，通過historyAPI，監聽popState事件，用pushState和replaceState來實現。

SPA 前端路由原理與實現方式

通常 SPA 中前端路由有2中實現方式，本文會簡單快速總結這兩種方法及其實現：

修改 url 中 Hash 利用 H5 中的 history

Hash

我們都知道 url 中可以帶有一個 hash， 比如下面 url 中的 page2

https://www.abc.com/index.html#page2

window 對象中有一個事件是 onhashchange，以下幾種情況都會觸發這個事件：

直接更改瀏覽器地址，在最后面增加或改變#hash； 通過改變location.href或location.hash的值； 通過觸發點擊帶錨點的鏈接； 瀏覽器前進后退可能導致hash的變化，前提是兩個網頁地址中的hash值不同。