vue-router是什么

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

vue-router是vue.js官方路由管理器。vue的單頁應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。（傳統頁面切換是用超鏈接a標簽進行切換）

##### 路由的兩種模式

前端路由核心：改變視圖的時候不會向后端發起請求。（vue-router中默認hash模式）

##### 1.hash模式：

哈希存在url中，但是發送請求的時候並不會被帶上，通過監聽`hashchange`事件得到hash值的變化，來實現更新頁面部分內容的操作。

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

2.history模式：

html5 history接口：pushState() 和 replaceState()，向歷史記錄中添加或替換而無須重新加載頁面。

function matchAndUpdate () {
   // todo 匹配路徑 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)

3、history模式刷新404問題：

用了 HTML5 的實現，單頁路由的 url 就不會多出一個#，變得更加美觀。

但因為沒有 # 號，當用戶刷新頁面時，瀏覽器還是會給服務器發送請求。

解決方法：需要服務器的支持，如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，那么刷新會跳首頁。