vue-router學習筆記（一）

學習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)：註冊一個回調，該回調會在路由導航過程當中出錯的時候被調用，可是對被調用的錯誤情形有要求：

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

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

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

$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：重定向來源的路由的名字，若是存在重定向的話。