vue router-link屬性解釋

發(fā)現(xiàn)router-link 有個(gè)tag屬性,很有意思,所以整理一下,各個(gè)屬性的解釋。


1. “:to” 屬性

相當(dāng)于a標(biāo)簽的“href”屬性,后面跟跳轉(zhuǎn)鏈接所用。

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

<!-- 渲染結(jié)果 -->

<a href="/home">Home</a>

2.“replace”屬性

? ?replace在router-link標(biāo)簽中添加后,頁面切換時(shí)不會留下歷史記錄

? ? <router-link :to="/home" replace></router-link>

3.“tag”屬性

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

?<router-link :to="/home" tag="li">Home</router-link>

<!-- 渲染結(jié)果 -->

<li>Home</li>

此時(shí)頁面的li同樣會起到a鏈接跳轉(zhuǎn)的結(jié)果,vue會自動為其綁定點(diǎn)擊事件,并跳轉(zhuǎn)頁面。

4. “active-class” 屬性

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

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

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

const router =new VueRouter({

? mode: 'hash',

? linkActiveClass: 'u-link--Active',// 這是鏈接激活時(shí)的class})

5.“exat” 屬性

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

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • SPA單頁應(yīng)用 傳統(tǒng)的項(xiàng)目大多使用多頁面結(jié)構(gòu),需要切換內(nèi)容的時(shí)候我們往往會進(jìn)行單個(gè)html文件的跳轉(zhuǎn),這個(gè)時(shí)候受網(wǎng)...
    視覺派Pie閱讀 12,194評論 1 55
  • <router-link> <router-link>組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過 ...
    李輕舟閱讀 739評論 1 3
  • 本文摘自:https://www.runoob.com/vue2/vue-routing.html <router...
    Czy_Farer閱讀 290評論 0 2
  • 這里說的Vue中的路由是指前端路由,與后端路由有所區(qū)別。我們可以使用url來獲取服務(wù)器的資源,而這種url與資源的...
    一顆腦袋閱讀 828評論 0 0
  • 這里說的Vue中的路由是指前端路由,與后端路由有所區(qū)別。我們可以使用url來獲取服務(wù)器的資源,而這種url與資源的...
    一顆腦袋閱讀 683評論 0 0

友情鏈接更多精彩內(nèi)容