Vue中router-link常用屬性使用案例講解
Vue中router-link常用屬性使用
在vue1.0版本的超鏈接標(biāo)簽還是原來的a標(biāo)簽,鏈接地址由v-link屬性控制
而vue2.0版本里超鏈接標(biāo)簽由a標(biāo)簽被替換成了router-link標(biāo)簽,但最終在頁面還是會被渲染成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)簽的使用,還有一個原因可能是因為a標(biāo)簽正常是鏈接的跳轉(zhuǎn)的作用,點(diǎn)擊a時可能會重載頁面,使用router-link,此標(biāo)簽會被vue所監(jiān)聽,跳轉(zhuǎn)鏈接時就不會刷新頁面了。
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)簽中添加后,頁面切換時不會留下歷史記錄 <router-link :to="/home" replace></router-link> tag屬性 具有tag屬性的router-link會被渲染成相應(yīng)的標(biāo)簽 <router-link :to="/home" tag="li">Home</router-link> <!-- 渲染結(jié)果 --> <li>Home</li> 此時頁面的li同樣會起到a鏈接跳轉(zhuǎn)的結(jié)果,vue會自動為其綁定點(diǎn)擊事件,并跳轉(zhuǎn)頁面
active-class屬性 這個屬性是設(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è)置,就會被渲染為這個class 可以在router.Js里面設(shè)置 const router = new VueRouter({ mode: 'hash', linkActiveClass: 'u-link--Active', // 這是鏈接激活時的class }) exact屬性 開啟router-link的嚴(yán)格模式 <router-link :to="/" exact>home</router-link> 上面這個標(biāo)簽如果不加exact屬性,則會在vue2.leenty.com/article頁面下也會被匹配到, 這卻不是我們的本意,在加了這個屬性后就會正確的匹配到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用于頁面切換時不會留下歷史記錄以及tag將router-link渲染成相應(yīng)的標(biāo)簽等等
在vue中,vue.js與 vue-router 兩者結(jié)合在一起可以實(shí)現(xiàn)簡單的單頁面應(yīng)用,其中<router-link>是一個組件,主要用于設(shè)置導(dǎo)航的鏈接來實(shí)現(xiàn)不同的HTML內(nèi)容切換。接下來在文章中將為大家具體介紹這一屬性,具有一定的參考價值,希望對大家有所幫助。
router-link標(biāo)簽
在vue1.0版本中的仍然用a標(biāo)簽來實(shí)現(xiàn)鏈接跳轉(zhuǎn)功能,但鏈接地址與html中不同,它是采用v-link屬性來控制。但是在2.0版本中a標(biāo)簽就被替換成了rount-link屬性,但是最終在頁面上顯示還是會被渲染成a標(biāo)簽。接下來將要詳細(xì)的介紹該屬性中的各個值的用法
router-link屬性值詳解
(1)":to" 屬性值
這個屬性值就相當(dāng)于a標(biāo)簽中的"herf"屬性,后面的內(nèi)容為跳轉(zhuǎn)鏈接的內(nèi)容
<router-link :to="http://www.dbjr.com.cn/">腳本之家</router-link>
相當(dāng)于
<a href="http://www.dbjr.com.cn/">腳本之家</a>
(2)"replace" 屬性值
replace屬性值在routre-link標(biāo)簽中添加的主要目的在于頁面切換時不會留下歷史記錄
<router-link :to="http://www.dbjr.com.cn/" replace></router-link>
(3)"tag" 屬性值
具有tag屬性的router-link都會被渲染成相應(yīng)的標(biāo)簽
<router-link :to="http:///www.dbjr.com.cn" tag="li">腳本之家</router-link>
相當(dāng)于
<li>腳本之家</li>
此時的頁面中的li同樣會起到a標(biāo)簽的作用,因為vue會自動為其綁定點(diǎn)擊事件,并跳轉(zhuǎn)頁面
(4)"active-class"屬性值
這個屬性是用于設(shè)置激活鏈接時class屬性,也就是當(dāng)前頁面及所有與當(dāng)前頁面地址所匹配的的鏈接都會被添加class屬性
<router-link :to="http://www.dbjr.com.cn" active-class="u-link--Active">腳本之家</router-link>
active-class屬性的默認(rèn)值是router-link-active,所以如果沒有設(shè)置,就會被渲染為這個class
(5)“append”屬性值
設(shè)置 append 屬性后,則在當(dāng)前 (相對) 路徑前添加基路徑。例如,我們從 /a 導(dǎo)航到一個相對路徑 b,如果沒有配置 append,則路徑為 /b,如果配了,則為 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>
使用router-link代替a標(biāo)簽的好處
router-link屬性在頁面中可以渲染為任何元素,比如上述代碼中渲染成li標(biāo)簽依然實(shí)現(xiàn)了跳轉(zhuǎn)效果。另外當(dāng)我們點(diǎn)擊a標(biāo)簽時可能會重載頁面,但是使用router-link后此標(biāo)簽會被vue所監(jiān)聽,跳轉(zhuǎn)鏈接時就不會刷新頁面了。
到此這篇關(guān)于Vue中router-link常用屬性-使用案例的文章就介紹到這了,更多相關(guān)Vue中router-link屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的可以參考一下2023-04-04建立和維護(hù)大型 Vue.js 項目的 10 個最佳實(shí)踐
這篇文章小編要與大家分享的是建立和維護(hù)大型 Vue.js 項目的 10 個最佳實(shí)踐,需要的小伙伴請和小編一起學(xué)習(xí)下面文章的具體內(nèi)容吧2021-09-09Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細(xì),需要的朋友可以參考下2024-01-01vue中的 $slot 獲取插槽的節(jié)點(diǎn)實(shí)例
今天小編就為大家分享一篇vue中的 $slot 獲取插槽的節(jié)點(diǎn)實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue實(shí)現(xiàn)頁面刷新跳轉(zhuǎn)到當(dāng)前頁面功能
在Vue.js應(yīng)用開發(fā)中,有時候我們需要實(shí)現(xiàn)頁面的刷新或跳轉(zhuǎn)到當(dāng)前頁面的功能,這種需求在某些特定場景下非常有用,本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)頁面刷新和跳轉(zhuǎn)到當(dāng)前頁面的功能,并提供多個示例和使用技巧,需要的朋友可以參考下2024-10-10Vue.js每天必學(xué)之計算屬性computed與$watch
Vue.js每天必學(xué)之計算屬性computed與$watch,為大家詳細(xì)講解計算屬性computed與$watch,感興趣的小伙伴們可以參考一下2016-09-09