路由這個概念最先是后端出現的。在以前用模板引擎開發頁面時，經常會看到這樣

http://www.xxx.com/login

大致流程可以看成這樣：

瀏覽器發出請求 服務器監聽到80端口（或443）有請求過來，并解析url路徑 根據服務器的路由配置，返回相應信息（可以是 html 字串，也可以是 json 數據，圖片等） 瀏覽器根據數據包的 Content-Type 來決定如何解析數據

簡單來說路由就是用來跟后端服務器進行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。

前端路由

1. hash 模式

隨著 ajax 的流行，異步數據請求交互運行在不刷新瀏覽器的情況下進行。而異步交互體驗的更高級版本就是 SPA —— 單頁應用。單頁應用不僅僅是在頁面交互是無刷新的，連頁面跳轉都是無刷新的，為了實現單頁應用，所以就有了前端路由。 類似于服務端路由，前端路由實現起來其實也很簡單，就是匹配不同的 url 路徑，進行解析，然后動態的渲染出區域 html 內容。但是這樣存在一個問題，就是 url 每次變化的時候，都會造成頁面的刷新。那解決問題的思路便是在改變 url 的情況下，保證頁面的不刷新。在 2014 年之前，大家是通過 hash 來實現路由，url hash 就是類似于：

http://www.xxx.com/#/login

這種 #。后面 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發 hashchange 這個事件，通過這個事件我們就可以知道 hash 值發生了哪些變化。然后我們便可以監聽 hashchange 來實現更新頁面部分內容的操作：

function matchAndUpdate () { // todo 匹配 hash 做 dom 更新操作}window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年后，因為HTML5標準發布。多了兩個 API， pushState 和 replaceState ，通過這兩個 API 可以改變 url 地址且不會發送請求。同時還有 popstate 事件。通過這些就能用另一種方式來實現前端路由了，但原理都是跟 hash 實現相同的。用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。但因為沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務器發送請求。為了避免出現這種情況，所以這個實現需要服務器的支持，需要把所有路由都重定向到根頁面。

function matchAndUpdate () { // todo 匹配路徑 做 dom 更新操作}window.addEventListener('popstate', matchAndUpdate)

Vue router 實現

我們來看一下 vue-router 是如何定義的：

import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ mode: 'history', routes: [...]})new Vue({ router ...})