發(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下