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
查看組件內的守衛。