學習vue-router首先要認識的兩個屬性 $router 和 $route。

$router指的是router實例，$route則是當前激活的路由信息對象，是只讀屬性，不可更改，但是可以watch（監聽）。

在瀏覽器中分別打印出$router 和 $route

$router：

屬性：

$router.app ：配置了router的Vue根實例

$router.mode：路由模式，這裏是hash

$router.currentRoute：當前路由的路由信息對象，包含了當前匹配路由的信息

方法：

router.addRoutes(routes)：動態添加路由規則，參數為符合routes選項要求的數組。

router.beforeEach(to,from,next) ：全局前置守衛

router.beforeEach((to,from,next)=>{
     //... 
})

　　當路由改變時，全局前置守衛執行，接受三個參數，to，from，next，分別代表即將要進入的目標路由，當前要離開的路由，和回調函數next()。next的執行效果依賴於參數。next()，執行下一個鉤子，若鉤子執行完畢，導航狀態是confirm；next(false)中斷當前導航，回到from路由對應的地址；next({path:‘/‘}),跳轉到自定義路由地址。next(error)，如果傳入一個error實例，則導航終止並將錯誤傳遞給router.onError()註冊過的回調。

router.beforeResolve()：全局解析守衛 , 在導航被確認之前，且在鎖頭組件內守衛和異步路由組件被解析之後調用，參數和全局前置守衛相同；

router.afterEach()：全局後置守衛

router.afterEach((to,from)=>{
    //....沒有next()函數參數，也不會改變導航本身
})

router.go(n)：接受一個整數作為參數，類似window.history.go(n)，在瀏覽器歷史記錄中前進或後退幾步

router.push( location )：跳轉導航的方法，這種方法會向history棧添加一個新的記錄

router.replace( location )：和router.push()類似，但是它會替換掉當前的history記錄，不會添加新的記錄

router.back()：相當於router.go(-1)

router.forward()：相當於router.go(1)

router.resolve(location)：解析目標路由，接受一個地址參數，返回location,route,href等屬性信息，還可以接受當前默認路由current和當前路由上附加路徑append　兩個參數

router.onReady(callback,[errorCallback]){}：把一個回調排隊，在路由完成初始導航時調用。

router.onError(callback)：註冊一個回調，該回調會在路由導航過程中出錯的時候被調用，但是對被調用的錯誤情形有要求：

　　1、錯誤在一個路由守衛函數中被同步拋出

　　2、錯誤在一個路由守衛函數中通過調用next(error)的方式異步捕獲並處理

　　3、渲染一個路由的過程中，需要嘗試解析一個異步組件時發生錯誤

$route：

route是路由信息對象，包含了當前路由的各種信息。路由對象是不可更改的，每次路由導航成功後都會產生一個新的對象。router.match（location）的返回值也是一個路由信息對象，導航守衛的參數to，from也是路由信息對象。

屬性：

$route.fullPath ：完成解析後的url，包含查詢參數和hash的完整路徑

$route.path：路徑，字符串類型，解析為絕對路徑

$route.hash： 當前路由的hash值（帶#號的），如果沒有hash值則為空字符串

$route.name：當前路由的名稱，如果有的話（用於命名路由）

$route.params：一個鍵值對對象，路由參數

$route.query：一個鍵值對對象，表示url查詢參數

$route.matched：一個包含了當前路由的所有嵌套路徑片段的路由記錄（routes配置數組中的對象副本）

$route.redirectedFrom：重定向來源的路由的名字，如果存在重定向的話。

vue-router學習筆記（一）