Vue-Router API參考

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