vue-router 經常使用api詳解

<router-link>

<router-link> 組件支持用戶在具備路由功能的應用中 (點擊) 導航。 經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag 屬性生成別的標籤。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的 CSS 類名

<router-link>Props

to

• 類型 string | Location
• required

表示目標路由的連接。當被點擊後，內部會馬上把 to 的值傳到 router.push()，因此這個值能夠是一個字符串或者是描述目標位置的對象。

<!--字符串-->
<router-link to="home">Home</router-link>
<!--渲染結果-->
<a href="home">Home</a>

<!--使用v-bind綁定-->
<router-link v-bind:to="home">Home</router-link>

<!--綁定對象的形式-->
<router-link v-bind:to="{path: 'home'}">Home</router-link>

<!--命名路由 下面的結果是：/user/123-->
<router-link :to="{name: 'user',params: {userId: 123}}"

<!--帶查詢參數，下面結果是：/user?plan=123-->
<router-link :to="{path: 'user', query: {plan: '123'}}">demo</router-link>
複製代碼

replace

• 類型：boolean
• 默認值：false

設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，因而導航後不會留下 history 記錄。

<router-link :to="{ path: '/abc'}" replace></router-link>
複製代碼

append

• 類型：string
• 默認值：false

設置 append 屬性後，則在當前 (相對) 路徑前添加基路徑。例如，咱們從 /a 導航到一個相對路徑 b，若是沒有配置 append，則路徑爲 /b，若是配了，則爲 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>
複製代碼

tag

• 類型：string
• 默認值："a"

有時候想要 <router-link> 渲染成某種標籤，例如 <li>。 因而咱們使用 tag prop 類指定何種標籤，一樣它仍是會監聽點擊，觸發導航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>
複製代碼

active-class

• 類型：string
• 默認值：router-link-active

設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置

<router-view>

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件。

其餘屬性 (非 router-view 使用的屬性) 都直接傳給渲染的組件， 不少時候，每一個路由的數據都是包含在路由參數中。

由於它也是個組件，因此能夠配合 <transition> 和 <keep-alive> 使用。若是兩個結合一塊兒用，要確保在內層使用 <keep-alive>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>
複製代碼

<router-view> Props

name

• 類型：string
• 默認值：default

若是<router-view>設置了名稱，則會渲染對應的路由配置中的components下的相應組件。

Router 構建選項

routes

• 類型：Array<RouteConfig>

RouteConfig的類型定義：

declare type RouteConfig = {
  path: string; //路徑
  component?: Component;
  name?: string; // 命名路由
  components?: { [name: string]: Component }; // 命名視圖組件
  redirect?: string | Location | Function; //重定向
  props?: boolean | Object | Function;
  alias?: string | Array<string>; //別名
  children?: Array<RouteConfig>; // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any; //路由元信息 使用$route.meta.屬性能夠獲取

  // 2.6.0+
  caseSensitive?: boolean; // 匹配規則是否大小寫敏感？(默認值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項
}
複製代碼

mode

• 類型：string
• 默認值：hash瀏覽器環境 | abstractnode.js環境
• 可選值："hash" | "history" | "abstract"

配置路由模式：

• hash:使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
• history:依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
• abstract:支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式

路由對象屬性

$router.path

• 類型:string

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

$router.params

• 類型：Object

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

$router.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 }
      ]
    }
  ]
})
複製代碼