vue-router與vue.js深度整合，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。一般的頁面應用，是用一些超連結來實現頁面切換和跳轉的，比如說a標籤，在vue-router單頁面應用中，則是路徑之間的切換，也就是元件的切換。
路由中有三個基本的概念：

1. route，它是一條路由。Home按鈕=>home內容，這是一條route，about
   按鈕=>about內容，這是另一條路由。
2. router是一組路由，把上面的每一條路由組合起來，形成一個數組。
   [ {home 按鈕 =>home內容 }， { about按鈕 => about 內容} ]
   router 是一個機制，相當於一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪裡是靜止的，當真正來了請求，怎麼辦？ 就是當用戶點選home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查詢，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。
3. 路由在專案中的基本定義為(檔案router/index.js)：
   
   再通過來實現元件之間的跳轉。
   1.1 宣告式路由
   在頁面中通常使用這個標籤來實現頁面的跳轉，它屬於宣告式路由，相當於a標籤。
   如何帶值傳遞？
   
   用法：
   
   1.2 程式設計式路由
   在頁面中可以使用這個標籤來實現頁面的跳轉，還可以通過router的例項化方法來實現頁面的跳轉。
   1.2.1 router.push
   平時使用的實際上是呼叫router.push。
   具體的語法：
   router.push(location, onComplete?, onAbort?)
   在具體使用該方法時，在Vue例項內部，可以通過router來訪問路由的例項，專案中常用到的有(c,d為傳參方式)：
   (a)this.router.push（‘/xxxx’） – 某一個路徑
   (b)this.router.push ({name : ‘xxxx’}) – 跳轉到某一個頁面
   ©this.router.push ({name : ‘xxxx’, query: xxx})
   (d)this.router.push ({name : ‘xxxx’, param: {userId: ‘xxxx’}}) --由於動態路由也是傳遞params的，所以在 this.router.push() 方法中 path不能和params一起使用，否則params將無效。需要用name來指定頁面。
   3與4的區別在於在頁面接收引數的方式不同：
   
   this.route.query.xxx
   this.route.param.xxx
   使用這個方法，它會向棧裡新增一條歷史記錄，所以在選擇回退時，它會回退到歷史頁面
   在專案中常見的場景是從一個單頁面回退到上一層頁面。
   
   1.2.2 router.replace
   語法：router.replace(location, onComplete?, onAbort?)
   這個跟 router.push 很像，唯一的不同就是，它不會向 history 新增新記錄，而是替換掉當前的 history 記錄。引數的傳遞與router.push相同。
   (1) 路由按需載入：
   為了不影響頁面載入，如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就很高效了
   我們一般定義路由：
   
   
   按需載入的寫法：
   
   1.2.3 router-view
   在App.vue中定義 router-view和 router-link,App.vue中定義router-view是必不可少的。
   
   專案中使用的場景：
   router-view 也可看做一個元件，結合 keep-alive 來，將所有匹配到的檢視元件進行快取處理，避免重複載入。
   
   1.2.4 路由鉤子
   路由鉤子主要是在路由發生變化時進行一些特殊處理，總的來說，提供了三大類鉤子函式：
   (1) 全域性鉤子
   (2) 某個路由獨享的鉤子
   (3) 元件內鉤子
   三種路由鉤子中都涉及到了三個引數：
   (1) to :Route:即將要進入的目標 路由物件
   (2) from :Route 當前導航正要離開的 路由
   (3) next : Function 一定要呼叫該方法來 resolve 這個鉤子。
   next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
   next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
   next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。
   next(error): 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。
   參考資料：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   (1)全域性鉤子：
   router. beforeEnter 與router.afterEach
   全域性鉤子在main.js裡面呼叫，比如以下的場景，一個應用頁面返回上一頁面
   
   (2)某個路由獨享的鉤子
   
   這個沒有用過，以後用上了再補上
   (3)元件內鉤子
   元件內的鉤子可以在路由元件中直接定義一下路由導航守衛。
   a)beforeRouteEnter
   b)beforeRouteUpdate (2.2 新增)
   c)beforeRouteLeave
   在專案中主要用到的是beforeRouteLeave，它的使用場景我用到最多的為：
   導航離開該元件的對應路由時，比如說從某頁面進入該編輯頁，當放棄編輯時，給出提示“資訊未儲存，是否編輯”。
   這裡用到了狀態管理store與vux，暫時忽略，現只看用法。