最近大家在學習vue相信大家一定是知道它是一個單頁面的應用，大家知道單頁面和多頁面應用的區別嘛，這一篇短文希望可以給你一個整體的認識。這裡也會介紹單頁應用實現的核心 —— 前端路由。

單頁應用 VS 多頁應用

這是一張對比圖

單頁應用（SinglePage Application，SPA）

指只有一個主頁面的應用，一開始只需載入一次 js,css 等相關資源。所有的內容都包含在主頁面，對每一個功能模組元件化。單頁應用跳轉，就是切換相關元件，僅重新整理區域性資源。

多頁應用（MultiPage Application，MPA）

指有多個獨立的頁面的應用，每個頁面必須重複載入 js,css

兩者對比表格：

單頁應用實現核心：前端路由

前端路由的核心：改變檢視的同時不會向後端發出請求。

講一下vue-router 路由的兩種模式：hash模式和history模式


1、hash 模式

hash 模式背後的原理是 onhashchange 事件。

window.addEventListener( hashchange ,function(e){console.log(e.oldURL);console.log(e.newURL)},false);

通過window.location.hash屬性獲取和設定hash值。

由於 hash 發生變化的 url 都會被瀏覽器記錄下來，所以瀏覽器的前進後退可以使用，儘管瀏覽器沒有請求伺服器，但是頁面狀態和 url 關聯起來。後來人們稱其為前端路由，成為單頁應用標配。

hash 模式的特點在於 hash 出現在 url 中，但是不會被包括在 HTTP 請求中，對後端沒有影響，不會重新載入頁面。

2、history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()，它們提供了對歷史記錄進行修改的功能。

相關的 API:

history.pushState() 新增記錄

history.replaceState() 替換記錄

popstate 事件：只會在瀏覽器某些行為下觸發, 比如點選後退、前進按鈕(或者呼叫 history.back()、history.forward()、history.go()

方法