Router 實例屬性

router.app

• 類型: Vue instance

  配置了 router 的 Vue 根實例。

router.mode

• 類型: string

  路由使用的模式。

router.currentRoute

• 類型: Route

  當前路由對應的路由信息對象。

Router 實例方法

router.beforeEach

router.beforeResolve

router.afterEach

函數簽名：

router.beforeEach((to, from, next) => {
  /* must call `next` */
})

router.beforeResolve((to, from, next) => {
  /* must call `next` */
})

router.afterEach((to, from) => {})

增加全局的導航守衛。參考導航守衛。

在 2.5.0+ 這三個方法都返回一個移除已注冊的守衛/鉤子的函數。

router.push

router.replace

router.go

router.back

router.forward

函數簽名：

router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
router.back()
router.forward()

動態的導航到一個新 URL。參考編程式導航。

router.getMatchedComponents

函數簽名：

const matchedComponents: Array<Component> = router.getMatchedComponents(location?)

返回目標位置或是當前路由匹配的組件數組 (是數組的定義/構造類，不是實例)。通常在服務端渲染的數據預加載時時候。

router.resolve

函數簽名：

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)

解析目標位置 (格式和 <router-link> 的 to prop 一樣)。

• current 是當前默認的路由 (通常你不需要改變它)
• append 允許你在 current 路由上附加路徑 (如同 router-link)

router.addRoutes

函數簽名：

router.addRoutes(routes: Array<RouteConfig>)

動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組。

router.onReady

函數簽名：

router.onReady(callback, [errorCallback])

該方法把一個回調排隊，在路由完成初始導航時調用，這意味著它可以解析所有的異步進入鉤子和路由初始化相關聯的異步組件。

這可以有效確保服務端渲染時服務端和客戶端輸出的一致。

第二個參數 errorCallback 只在 2.4+ 支持。它會在初始化路由解析運行出錯 (比如解析一個異步組件失敗) 時被調用。

router.onError

函數簽名：

router.onError(callback)

注冊一個回調，該回調會在路由導航過程中出錯時被調用。注意被調用的錯誤必須是下列情形中的一種：

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

• 錯誤在一個路由守衛函數中通過調用 next(err) 的方式異步捕獲并處理；

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

路由對象

一個路由對象 (route object) 表示當前激活的路由的狀態信息，包含了當前 URL 解析得到的信息，還有 URL 匹配到的路由記錄 (route records)。

路由對象是不可變 (immutable) 的，每次成功的導航后都會產生一個新的對象。

路由對象出現在多個地方:

• 在組件內，即 this.$route

• 在 $route 觀察者回調內

• router.match(location) 的返回值

• 導航守衛的參數：

  router.beforeEach((to, from, next) => {
    // `to` 和 `from` 都是路由對象
  })
  
  

• scrollBehavior 方法的參數:

  const router = new VueRouter({
    scrollBehavior (to, from, savedPosition) {
      // `to` 和 `from` 都是路由對象
    }
  })
  
  

路由對象屬性

• $route.path

  • 類型: string

    字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。

• $route.params

  • 類型: Object

    一個 key/value 對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個空對象。

• $route.query

  • 類型: Object

    一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。

• $route.hash

  • 類型: string

    當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串。

• $route.fullPath

  • 類型: string

    完成解析后的 URL，包含查詢參數和 hash 的完整路徑。

• $route.matched

  • 類型: Array<RouteRecord>

  一個數組，包含當前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組)。

  const router = new VueRouter({
    routes: [
      // 下面的對象就是路由記錄
      { path: '/foo', component: Foo,
        children: [
          // 這也是個路由記錄
          { path: 'bar', component: Bar }
        ]
      }
    ]
  })
  
  

  當 URL 為 /foo/bar，$route.matched 將會是一個包含從上到下的所有對象 (副本)。

• $route.name

  當前路由的名稱，如果有的話。(查看命名路由)

• $route.redirectedFrom

  如果存在重定向，即為重定向來源的路由的名字。(參閱重定向和別名)

組件注入

注入的屬性

通過在 Vue 根實例的 router 配置傳入 router 實例，下面這些屬性成員會被注入到每個子組件。

• this.$router

  router 實例。

• this.$route

  當前激活的路由信息對象。這個屬性是只讀的，里面的屬性是 immutable (不可變) 的，不過你可以 watch (監測變化) 它。

增加的組件配置選項

• beforeRouteEnter

• beforeRouteUpdate

• beforeRouteLeave

  查看組件內的守衛。