一：Vue-router有幾種鉤子函式？具體是什麼及執行流程是怎樣的？

核心答案：

路由鉤子的執行流程，鉤子函式種類有：全域性守衛、路由守衛、元件守衛。

完整的導航解析流程

1.導航被觸發；

2.在失活的元件裡呼叫beforeRouteLeave守衛；

3.呼叫全域性beforeEach守衛；

4.在複用元件裡呼叫beforeRouteUpdate守衛；

5.呼叫路由配置裡的beforeEnter守衛；

6.解析非同步路由元件；

7.在被啟用的元件裡呼叫beforeRouteEnter守衛；

8.呼叫全域性beforeResolve守衛；

9.導航被確認；

10.呼叫全域性的afterEach鉤子；

11.DOM更新；

12.用建立好的例項呼叫beforeRouteEnter守衛中傳給next的回撥函式。

二：vue-router 兩種模式的區別？

核心答案：

vue-router 有 3 種路由模式：hash、history、abstract。

1) hash模式：hash + hashChange

特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。通過監聽 hash（#）的變化來執行js程式碼 從而實現 頁面的改變。

核心程式碼：

window.addEventListener(‘hashchange‘,function
 
(){

    self.urlChange()

})

2) history模式：historyApi + popState

HTML5推出的history API，由pushState()記錄操作歷史，監聽popstate事件來監聽到狀態變更；

因為 只要重新整理 這個url（www.ff.ff/jjkj/fdfd/fdf/fd）就會請求伺服器，然而伺服器上根本沒有這個資源，所以就會報404，解決方案就 配置一下伺服器端。

說明：

1）hash: 使用URL hash值來作路由。支援所有瀏覽器，包括不支援 HTML5 History Api 的瀏覽器；

2）history : 依賴HTML5 History API和伺服器配置。具體可以檢視 HTML5 History 模式；

3）abstract : 支援所有JavaScript 執行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式.