<router-link>

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過(guò) to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過(guò)配置 tag 屬性生成別的標(biāo)簽。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名

<router-link>Props

to

• 類型 string | Location
• required

表示目標(biāo)路由的鏈接。當(dāng)被點(diǎn)擊后，內(nèi)部會(huì)立刻把 to 的值傳到 router.push()，所以這個(gè)值可以是一個(gè)字符串或者是描述目標(biāo)位置的對(duì)象。

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

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

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

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

<!--帶查詢參數(shù)，下面結(jié)果是：/user?plan=123-->
<router-link :to="{path: 'user', query: {plan: '123'}}">demo</router-link>

replace

• 類型：boolean
• 默認(rèn)值：false

設(shè)置 replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace() 而不是 router.push()，于是導(dǎo)航后不會(huì)留下 history 記錄。

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

append

• 類型：string
• 默認(rèn)值：false

設(shè)置 append 屬性后，則在當(dāng)前 (相對(duì)) 路徑前添加基路徑。例如，我們從 /a 導(dǎo)航到一個(gè)相對(duì)路徑 b，如果沒(méi)有配置 append，則路徑為 /b，如果配了，則為 /a/b

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

tag

• 類型：string
• 默認(rèn)值："a"

有時(shí)候想要 <router-link> 渲染成某種標(biāo)簽，例如 <li>。 于是我們使用 tag prop 類指定何種標(biāo)簽，同樣它還是會(huì)監(jiān)聽(tīng)點(diǎn)擊，觸發(fā)導(dǎo)航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結(jié)果 -->
<li>foo</li>

active-class

• 類型：string
• 默認(rèn)值：router-link-active

設(shè)置 鏈接激活時(shí)使用的 CSS 類名。默認(rèn)值可以通過(guò)路由的構(gòu)造選項(xiàng) linkActiveClass 來(lái)全局配置

<router-view>

<router-view> 組件是一個(gè) functional 組件，渲染路徑匹配到的視圖組件。<router-view> 渲染的組件還可以內(nèi)嵌自己的 <router-view>，根據(jù)嵌套路徑，渲染嵌套組件。

其他屬性 (非 router-view 使用的屬性) 都直接傳給渲染的組件， 很多時(shí)候，每個(gè)路由的數(shù)據(jù)都是包含在路由參數(shù)中。

因?yàn)樗彩莻€(gè)組件，所以可以配合 <transition> 和 <keep-alive> 使用。如果兩個(gè)結(jié)合一起用，要確保在內(nèi)層使用 <keep-alive>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

<router-view> Props

name

• 類型：string
• 默認(rèn)值：default

如果<router-view>設(shè)置了名稱，則會(huì)渲染對(duì)應(yīng)的路由配置中的components下的相應(yīng)組件。

Router 構(gòu)建選項(xiàng)

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; // 匹配規(guī)則是否大小寫敏感？(默認(rèn)值：false)
  pathToRegexpOptions?: Object; // 編譯正則的選項(xiàng)
}

mode

• 類型：string
• 默認(rèn)值：hash瀏覽器環(huán)境 | abstractnode.js環(huán)境
• 可選值："hash" | "history" | "abstract"

配置路由模式：

• hash:使用 URL hash 值來(lái)作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
• history:依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式。
• abstract:支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式

路由對(duì)象屬性

$router.path

• 類型:string

字符串，對(duì)應(yīng)當(dāng)前路由的路徑，總是解析為絕對(duì)路徑，如 "/foo/bar"

$router.params

• 類型：Object

一個(gè) key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象。

$router.query

• 類型：Object

一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。例如，對(duì)于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。

$route.hash

• 類型：string

當(dāng)前路由的 hash 值 (帶 #) ，如果沒(méi)有 hash 值，則為空字符串。

$route.fullPath

• 類型：string

完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑。

$route.matched

• 類型：Array<RouteRecord>

一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數(shù)組中的對(duì)象副本 (還有在 children 數(shù)組)。

const router = new VueRouter({
  routes: [
    // 下面的對(duì)象就是路由記錄
    { path: '/foo', component: Foo,
      children: [
        // 這也是個(gè)路由記錄
        { path: 'bar', component: Bar }
      ]
    }
  ]
})