承接上文vue2.0一起在懵逼的海洋里越陷越深（二）
前面寫了vue-router組件的初步用法钩杰，原來這次想寫vuex的爬立，但是想想還是先繼續(xù)把vue-router寫完吧??
上回說到: vue-router的基本用法霞怀，下面繼續(xù)深入
啊不！是繼續(xù)向著懵逼海洋的海底繼續(xù)下沉郊丛，哈哈哈哈
前面已經(jīng)設(shè)置了兩個(gè)路由躯喇，一個(gè)是首頁，一個(gè)是文章頁侠碧，現(xiàn)在在開一個(gè)演示頁的路由
首頁以后頂多就展示下大致的新內(nèi)容抹估，文章頁頂多放放文章詳情
這演示頁可就厲害了，接下來的一些演示都會(huì)放在這里弄兜，具體的布局還沒想好药蜻，先這么用著吧瓷式！
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)心什么踱卵，因?yàn)樽詈鬀]有什么特殊的設(shè)置的話廊驼，router-link標(biāo)簽還是會(huì)被渲染成a標(biāo)簽的。
至于為什么在vue2.0的時(shí)候被替換成了router-link標(biāo)簽?zāi)兀?br>
大致YY了下惋砂，部分情節(jié)應(yīng)該是這樣的：
- 最主要情況妒挎，在上個(gè)版本中，鏈接只能以
a標(biāo)簽的形式存在西饵，不能滿足一些特殊的要求酝掩，比如在列表(ul>li)下，你需要為在里下面再加上一個(gè)a鏈接才能完成點(diǎn)擊列表跳轉(zhuǎn)頁面眷柔，so2.0版本中路由從a標(biāo)簽變成了可以任意渲染成各種元素的router-link標(biāo)簽期虾，如此一來，就可以直接渲染成li標(biāo)簽驯嘱，省下了a標(biāo)簽(具體怎么做下面會(huì)統(tǒng)一說明) - 為什么不直接使用正常
a標(biāo)簽寫法做鏈接跳轉(zhuǎn)呢镶苞？當(dāng)點(diǎn)擊正常的a鏈接時(shí)，就會(huì)感覺到頁面跳轉(zhuǎn)時(shí)的頁面刷新重載的感覺鞠评，因?yàn)檫@個(gè)a標(biāo)簽并沒有被vue-router所監(jiān)聽到事件的觸發(fā)宾尚，所以就會(huì)發(fā)生正常的頁面跳轉(zhuǎn)，所以頁面就會(huì)重載谢澈。那是傳統(tǒng)的網(wǎng)頁上才會(huì)發(fā)生的事。使用了vue-router組件所提供的router-link后御板，頁面內(nèi)的a標(biāo)簽就會(huì)被vue所監(jiān)聽锥忿，以便在用戶點(diǎn)擊鏈接的時(shí)候阻止瀏覽器的默認(rèn)跳轉(zhuǎn)行為，而轉(zhuǎn)為無刷新加載的方式怠肋。當(dāng)然這只作用于自己的站點(diǎn)內(nèi)敬鬓。
“router-link”標(biāo)簽的屬性(Props)
沒錯(cuò)，只要是標(biāo)簽笙各，多多少少都是有屬性的钉答，最次class和id屬性也是可以添加的。
下面說說router-link標(biāo)簽的各個(gè)屬性
“to”屬性
to屬性最簡單的用法就是如a標(biāo)簽里的href屬性一樣的填寫杈抢，簡單粗暴数尿，想去哪就去哪。
其實(shí)惶楼，to屬性的值可以有兩種：
** 其一為字符串形式右蹦，也就是前面說到的如href一樣的用法 **
<!-- 字符串 -->
<router-link :to="/article">Article</router-link>
<!-- 渲染結(jié)果 -->
<a href="/article">Article</a>
** 其二為對(duì)象形式诊杆，下面看看to屬性的 對(duì)象的主要結(jié)構(gòu) **
// 主要結(jié)構(gòu)
{
name: 'Article'
}
// 或者
{
path: '/article'
}
// 二者選其中之一，如果兩種都使用何陆，那么vue會(huì)選擇使用name字段
// eg
{
name: 'Article',
path: '/demo'
}
// 實(shí)際效果等同于:
{
name: 'Article'
}
對(duì)于里面的path字段晨汹，其實(shí)就是就是想去哪就去哪的to屬性字符串的對(duì)象形式
至于name字段，是不是會(huì)有些懵逼贷盲？這個(gè)name其實(shí)就是上一篇里說到的routes.js文件里的name字段啦淘这！
就是這個(gè)！填成一樣的就好啦巩剖！注意大小寫哦
** to屬性的 對(duì)象的可選結(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ù)，安裝這個(gè)插件需要翻墻下載
或者可以去github上下代碼編譯插件,如果覺得麻煩也可以百度去其他網(wǎng)站下
對(duì)于可選參數(shù)是不是會(huì)有些懵球及，下面貼幾張圖就明白了
其中
params是隱性傳遞氧骤，query是顯性傳遞。
紅框部分就是傳遞的
query了
“replace”屬性
顧名思義吃引，replace是替換的意思筹陵，所以在router-link標(biāo)簽添加了這個(gè)屬性后，頁面切換時(shí)不會(huì)留下歷史記錄
<router-link :to="{ path: '/abc'}" replace></router-link>
“append”屬性
append會(huì)把當(dāng)前路徑設(shè)置為相對(duì)路徑镊尺，何為相對(duì)路徑朦佩？比如你當(dāng)前在vue2.leenty.com/demo下，點(diǎn)擊這個(gè)鏈接<router-link :to="{ path: 'article'}" append></router-link>,如果沒帶append屬性庐氮，那么就會(huì)跳到vue2.leenty.com/article下(hash模式下是vue2.leenty.com/#/article)语稠，而現(xiàn)在卻是跳到了vue2.leenty.com/demo/article下。這個(gè)屬性用處不是很大弄砍，在特殊情況下才會(huì)用到仙畦。
推薦還是把自己地址寫全，不要使用相對(duì)地址音婶，這樣容易搞錯(cuò)
另外加個(gè)小技巧慨畸，在地址前加/能保證是跳轉(zhuǎn)根目錄的
“tag”屬性
具有tag屬性的的router-link標(biāo)簽會(huì)被渲染為相應(yīng)的標(biāo)簽
<router-link :to="/article" tag="li">article</router-link>
將會(huì)被渲染為
<li>article</li>
這里不需要擔(dān)心li的跳轉(zhuǎn)問題，vue會(huì)自動(dòng)為其綁定點(diǎn)擊事件衣式，并跳轉(zhuǎn)頁面
“active-class”屬性
這個(gè)屬性如字面意思上說的寸士，是設(shè)置激活鏈接時(shí)的class屬性
即是當(dāng)前頁面所有與當(dāng)前地址所匹配的鏈接都會(huì)被添加這個(gè)class屬性
<router-link :to="/article" active-class="u-link--Active">article</router-link>
如此，在vue2.leenty.com/article頁面下(hash模式下是vue2.leenty.com/#/article)就會(huì)被渲染為
<a href="/article" class="u-link--Active"></a>
active-class屬性的默認(rèn)值是router-link-active,所以如果沒有設(shè)置碴卧，就會(huì)被渲染為這個(gè)class
其實(shí)在上一章節(jié)有說到統(tǒng)一的設(shè)置這個(gè)active-class屬性
打開router.js文件就能看到
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 這是鏈接激活時(shí)的class
routes
})
“exact”屬性
開啟router-link的嚴(yán)格模式
<router-link :to="/" exact>home</router-link>
上面這個(gè)標(biāo)簽如果不加exact屬性弱卡，則會(huì)在vue2.leenty.com/article頁面下也會(huì)被匹配到，
這卻不是我們的本意,在加了這個(gè)屬性后就會(huì)正確的匹配到vue2.leenty.com下
以上為vue-router的router-link的介紹
