<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 }
      ]
    }
  ]
})