Vue中router-link常用屬性使用

在vue1.0版本的超鏈接標(biāo)簽還是原來(lái)的a標(biāo)簽，鏈接地址由v-link屬性控制
而vue2.0版本里超鏈接標(biāo)簽由a標(biāo)簽被替換成了router-link標(biāo)簽，但最終在頁(yè)面還是會(huì)被渲染成a標(biāo)簽的
至于為什么要把a(bǔ)換成router-link原因還是有的，比如我們之前一直慣用的nav導(dǎo)航里面結(jié)構(gòu)是（ul>li>a），router-link可以渲染為任何元素，這里可以直接渲染成li標(biāo)簽，同樣能實(shí)現(xiàn)跳轉(zhuǎn)效果，節(jié)省了a標(biāo)簽的使用，還有一個(gè)原因可能是因?yàn)閍標(biāo)簽正常是鏈接的跳轉(zhuǎn)的作用，點(diǎn)擊a時(shí)可能會(huì)重載頁(yè)面，使用router-link，此標(biāo)簽會(huì)被vue所監(jiān)聽(tīng)，跳轉(zhuǎn)鏈接時(shí)就不會(huì)刷新頁(yè)面了。

router-link屬性

:to 屬性
 
相當(dāng)于a標(biāo)簽中的”herf”屬性，后面跟跳轉(zhuǎn)鏈接所用
<router-link :to="/home">Home</router-link>
<!-- 渲染結(jié)果 -->
<a href="/home" rel="external nofollow" >Home</a>
replace屬性
 
replace在routre-link標(biāo)簽中添加后，頁(yè)面切換時(shí)不會(huì)留下歷史記錄
<router-link :to="/home" replace></router-link>
 
tag屬性
 
具有tag屬性的router-link會(huì)被渲染成相應(yīng)的標(biāo)簽
<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染結(jié)果 -->
<li>Home</li>
 
此時(shí)頁(yè)面的li同樣會(huì)起到a鏈接跳轉(zhuǎn)的結(jié)果，vue會(huì)自動(dòng)為其綁定點(diǎn)擊事件，并跳轉(zhuǎn)頁(yè)面

active-class屬性
 
這個(gè)屬性是設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁(yè)面所有與當(dāng)前地址所匹配的的鏈接都會(huì)被添加class屬性
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class屬性的默認(rèn)值是router-link-active,所以如果沒(méi)有設(shè)置，就會(huì)被渲染為這個(gè)class
可以在router.Js里面設(shè)置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 這是鏈接激活時(shí)的class
})
exact屬性
 
開(kāi)啟router-link的嚴(yán)格模式
<router-link :to="/" exact>home</router-link>
上面這個(gè)標(biāo)簽如果不加exact屬性，則會(huì)在vue2.leenty.com/article頁(yè)面下也會(huì)被匹配到，
這卻不是我們的本意,在加了這個(gè)屬性后就會(huì)正確的匹配到vue2.leenty.com下

以上內(nèi)容就給大家介紹到這里，下面介紹下vue中的router-link屬性詳解

vue中的router-link屬性詳解

vue中的router-link屬性有以下屬性值：to相當(dāng)于herf標(biāo)簽用于添加跳轉(zhuǎn)內(nèi)容，replace用于頁(yè)面切換時(shí)不會(huì)留下歷史記錄以及tag將router-link渲染成相應(yīng)的標(biāo)簽等等

在vue中，vue.js與 vue-router 兩者結(jié)合在一起可以實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用，其中<router-link>是一個(gè)組件，主要用于設(shè)置導(dǎo)航的鏈接來(lái)實(shí)現(xiàn)不同的HTML內(nèi)容切換。接下來(lái)在文章中將為大家具體介紹這一屬性，具有一定的參考價(jià)值，希望對(duì)大家有所幫助。

router-link標(biāo)簽

在vue1.0版本中的仍然用a標(biāo)簽來(lái)實(shí)現(xiàn)鏈接跳轉(zhuǎn)功能，但鏈接地址與html中不同，它是采用v-link屬性來(lái)控制。但是在2.0版本中a標(biāo)簽就被替換成了rount-link屬性，但是最終在頁(yè)面上顯示還是會(huì)被渲染成a標(biāo)簽。接下來(lái)將要詳細(xì)的介紹該屬性中的各個(gè)值的用法

router-link屬性值詳解

（1）":to" 屬性值

這個(gè)屬性值就相當(dāng)于a標(biāo)簽中的"herf"屬性，后面的內(nèi)容為跳轉(zhuǎn)鏈接的內(nèi)容

<router-link :to="http://chabaoo.cn/">腳本之家</router-link>

相當(dāng)于

<a href="http://chabaoo.cn/">腳本之家</a>

（2）"replace" 屬性值

replace屬性值在routre-link標(biāo)簽中添加的主要目的在于頁(yè)面切換時(shí)不會(huì)留下歷史記錄

<router-link :to="http://chabaoo.cn/" replace></router-link>

（3）"tag" 屬性值

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

<router-link :to="http:///chabaoo.cn" tag="li">腳本之家</router-link>

相當(dāng)于

<li>腳本之家</li>

此時(shí)的頁(yè)面中的li同樣會(huì)起到a標(biāo)簽的作用，因?yàn)関ue會(huì)自動(dòng)為其綁定點(diǎn)擊事件，并跳轉(zhuǎn)頁(yè)面

（4）"active-class"屬性值

這個(gè)屬性是用于設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁(yè)面及所有與當(dāng)前頁(yè)面地址所匹配的的鏈接都會(huì)被添加class屬性

<router-link :to="http://chabaoo.cn" active-class="u-link--Active">腳本之家</router-link>

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

（5）“append”屬性值

設(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>

使用router-link代替a標(biāo)簽的好處

router-link屬性在頁(yè)面中可以渲染為任何元素，比如上述代碼中渲染成li標(biāo)簽依然實(shí)現(xiàn)了跳轉(zhuǎn)效果。另外當(dāng)我們點(diǎn)擊a標(biāo)簽時(shí)可能會(huì)重載頁(yè)面，但是使用router-link后此標(biāo)簽會(huì)被vue所監(jiān)聽(tīng)，跳轉(zhuǎn)鏈接時(shí)就不會(huì)刷新頁(yè)面了。

到此這篇關(guān)于Vue中router-link常用屬性-使用案例的文章就介紹到這了,更多相關(guān)Vue中router-link屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論