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 實例, 通過這些屬性成員會被注入到每個子組件。

增加的組件配置選項

beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 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 的回調函數。

轉載于:https://www.cnblogs.com/zhaodizero/p/10336637.html

總結

以上是生活随笔為你收集整理的Vue-Router API参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。