承接上文vue2.0一起在懵逼的海洋里越陷越深（二）
前面寫了vue-router組件的初步用法，原來這次想寫vuex的，但是想想還是先繼續(xù)把vue-router寫完吧??

上回說到: vue-router的基本用法，下面繼續(xù)深入

啊不！是繼續(xù)向著懵逼海洋的海底繼續(xù)下沉，哈哈哈哈
前面已經(jīng)設(shè)置了兩個路由，一個是首頁，一個是文章頁，現(xiàn)在在開一個演示頁的路由
首頁以后頂多就展示下大致的新內(nèi)容，文章頁頂多放放文章詳情
這演示頁可就厲害了，接下來的一些演示都會放在這里，具體的布局還沒想好，先這么用著吧！

vue-router的超鏈接標(biāo)簽“router-link”

在vue1.0版本的超鏈接標(biāo)簽還是原來的a標(biāo)簽，鏈接地址由v-link屬性控制(具體的這里也不多說了，vue1.0已經(jīng)過去啦)
而vue2.0版本里超鏈接標(biāo)簽由a標(biāo)簽被替換成了router-link標(biāo)簽，當(dāng)然，沒有必要不用擔(dān)心什么，因為最后沒有什么特殊的設(shè)置的話，router-link標(biāo)簽還是會被渲染成a標(biāo)簽的。
至于為什么在vue2.0的時候被替換成了router-link標(biāo)簽?zāi)兀?br> 大致YY了下，部分情節(jié)應(yīng)該是這樣的：

• 最主要情況，在上個版本中，鏈接只能以a標(biāo)簽的形式存在，不能滿足一些特殊的要求，比如在列表(ul>li)下，你需要為在里下面再加上一個a鏈接才能完成點擊列表跳轉(zhuǎn)頁面，so2.0版本中路由從a標(biāo)簽變成了可以任意渲染成各種元素的router-link標(biāo)簽，如此一來，就可以直接渲染成li標(biāo)簽，省下了a標(biāo)簽(具體怎么做下面會統(tǒng)一說明)
• 為什么不直接使用正常a標(biāo)簽寫法做鏈接跳轉(zhuǎn)呢？當(dāng)點擊正常的a鏈接時，就會感覺到頁面跳轉(zhuǎn)時的頁面刷新重載的感覺，因為這個a標(biāo)簽并沒有被vue-router所監(jiān)聽到事件的觸發(fā)，所以就會發(fā)生正常的頁面跳轉(zhuǎn)，所以頁面就會重載。那是傳統(tǒng)的網(wǎng)頁上才會發(fā)生的事。使用了vue-router組件所提供的router-link后，頁面內(nèi)的a標(biāo)簽就會被vue所監(jiān)聽，以便在用戶點擊鏈接的時候阻止瀏覽器的默認(rèn)跳轉(zhuǎn)行為，而轉(zhuǎn)為無刷新加載的方式。當(dāng)然這只作用于自己的站點內(nèi)。

“router-link”標(biāo)簽的屬性(Props)

沒錯，只要是標(biāo)簽，多多少少都是有屬性的，最次class和id屬性也是可以添加的。
下面說說router-link標(biāo)簽的各個屬性

“to”屬性

to屬性最簡單的用法就是如a標(biāo)簽里的href屬性一樣的填寫，簡單粗暴，想去哪就去哪。
其實，to屬性的值可以有兩種：

** 其一為字符串形式，也就是前面說到的如href一樣的用法 **

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

** 其二為對象形式，下面看看to屬性的 對象的主要結(jié)構(gòu) **

// 主要結(jié)構(gòu)
{
  name: 'Article'
}
  // 或者
{
  path: '/article'
}
// 二者選其中之一，如果兩種都使用，那么vue會選擇使用name字段
// eg
{
  name: 'Article',
  path: '/demo'
}
// 實際效果等同于:
{
  name: 'Article'
}

對于里面的path字段，其實就是就是想去哪就去哪的to屬性字符串的對象形式
至于name字段，是不是會有些懵逼？這個name其實就是上一篇里說到的routes.js文件里的name字段啦！
就是這個！填成一樣的就好啦！注意大小寫哦

routes.js-name字段

** to屬性的 對象的可選結(jié)構(gòu) **

{
  name: 'Article', // 與path字段二選一
  path: '/article', // 與name字段二選一
  params: { // 可選字段 隱性的傳遞參數(shù)(多用來頁面?zhèn)鲄?
    userId: 123 // 傳遞的參數(shù)demo
  },
  query: { // 可選字段 查詢參數(shù)，就是url里‘?’之后的部分
    plan: 'private' // 查詢參數(shù)demo
  }
}

可以使用chrome插件vue.js devtools來查看vue的路由的params參數(shù)，安裝這個插件需要翻墻下載
或者可以去github上下代碼編譯插件,如果覺得麻煩也可以百度去其他網(wǎng)站下
對于可選參數(shù)是不是會有些懵，下面貼幾張圖就明白了

查看路由參數(shù)

路由query

“replace”屬性

顧名思義，replace是替換的意思，所以在router-link標(biāo)簽添加了這個屬性后，頁面切換時不會留下歷史記錄

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

“append”屬性

append會把當(dāng)前路徑設(shè)置為相對路徑，何為相對路徑？比如你當(dāng)前在vue2.leenty.com/demo下，點擊這個鏈接<router-link :to="{ path: 'article'}" append></router-link>,如果沒帶append屬性，那么就會跳到vue2.leenty.com/article下(hash模式下是vue2.leenty.com/#/article)，而現(xiàn)在卻是跳到了vue2.leenty.com/demo/article下。這個屬性用處不是很大，在特殊情況下才會用到。
推薦還是把自己地址寫全，不要使用相對地址，這樣容易搞錯
另外加個小技巧，在地址前加/能保證是跳轉(zhuǎn)根目錄的

“tag”屬性

具有tag屬性的的router-link標(biāo)簽會被渲染為相應(yīng)的標(biāo)簽

<router-link :to="/article" tag="li">article</router-link>

將會被渲染為

<li>article</li>

這里不需要擔(dān)心li的跳轉(zhuǎn)問題，vue會自動為其綁定點擊事件，并跳轉(zhuǎn)頁面

“active-class”屬性

這個屬性如字面意思上說的，是設(shè)置激活鏈接時的class屬性
即是當(dāng)前頁面所有與當(dāng)前地址所匹配的鏈接都會被添加這個class屬性

<router-link :to="/article" active-class="u-link--Active">article</router-link>

如此，在vue2.leenty.com/article頁面下(hash模式下是vue2.leenty.com/#/article)就會被渲染為

<a href="/article" class="u-link--Active"></a>

active-class屬性的默認(rèn)值是router-link-active,所以如果沒有設(shè)置，就會被渲染為這個class

其實在上一章節(jié)有說到統(tǒng)一的設(shè)置這個active-class屬性
打開router.js文件就能看到

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 這是鏈接激活時的class
  routes
})

“exact”屬性

開啟router-link的嚴(yán)格模式

<router-link :to="/" exact>home</router-link>

上面這個標(biāo)簽如果不加exact屬性，則會在vue2.leenty.com/article頁面下也會被匹配到，
這卻不是我們的本意,在加了這個屬性后就會正確的匹配到vue2.leenty.com下

以上為vue-router的router-link的介紹