Vue Router API 參考
1. < router-link> Props
# tag
類型: string
默認值: "a"
有時候想要 <router-link> 渲染成某種標簽，例如 <li>。 於是我們使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li> foo </li>
2. < router-view >
<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還可以內嵌自己的 <router-view>，根據嵌套路徑，渲染嵌套組件。
3. < router-view > Props
# name
類型: string
默認值: "default"
如果 <router-view>設置了名稱，則會渲染對應的路由配置中 components 下的相應組件。查看 命名視圖 中的例子。
4. Router 構建選項
# routes
類型: Array<RouteConfig>
RouteConfig 的類型定義：
declare type RouterConfig = {
path: string;
component?:Component; // 引用組件的名字
name?: string; //命名路由
components: {[name:string]:Component}; // 命名視圖組件
redirect: string | location | Function; // 重定向
props: string | boolean | Function; // 傳參
alias: string | Array<string>; // 別名
children: Array<RouterConfig>; // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void;
meta?: any;
// 2.6.0+
caseSensitive?: boolean; // 匹配規則是否大小寫敏感？(默認值：false)
pathToRegexpOptions?: Object; // 編譯正則的選項
}
# mode
類型: string
默認值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)
可選值: "hash" | "history" | "abstract"
配置路由模式:
hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。
# base
類型: string
默認值: "/"
應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"。
# linkActiveClass
類型: string
默認值: "router-link-active"
全局配置 <router-link> 的默認“激活 class 類名”。參考 router-link。
# linkExactActiveClass
類型: string
默認值: "router-link-exact-active"
全局配置 <router-link> 精確激活的默認的 class。可同時翻閱 router-link。
5. Router 實例屬性
# router
類型: Vue instance
配置了 router 的 Vue 根實例
# router.mode
類型: string
路由使用的模式。
# router.currentRoute
類型: Route
當前路由對應的路由信息對象。
6. 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
7.路由對象
一個路由對象表示當前激活的路由的狀態信息，包含了當前URL解析得到的信息,還有URL 匹配到的路由記錄( route records)。
路由對象是不可變的，每次成功的導航后都會產生一個新的對象。
路由對象出現在多個地方:
在組件內，即 this.$route
在 $route 觀察者回調內
router.match(location) 的返回值
導航守衛的參數：
router.beforeEach((to, from, next) => {
// `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
如果存在重定向，即為重定向來源的路由的名字。(參閱重定向和別名)
8. 組件注入
組件注入的屬性
通過在 Vue 根實例的 router 配置傳入 router 實例, 通過這些屬性成員會被注入到每個子組件。
增加的組件配置選項
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
},
beforeRouteUpdate (to, from, next) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鈎子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
}
完整的導航解析流程
1. 導航被觸發。
2. 在失活的組件里調用離開守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置里調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件里調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鈎子。
11. 觸發 DOM 更新。
12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。