router-link下劃線和顏色問題

使用router-link鏈接的文字，默認(rèn)為藍(lán)色并帶下劃線，很不好看。

解決方法

在<style scoped></style>中添加樣式：

<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
</style>

a指文字不帶下劃線且為白色，router-link-active指點(diǎn)擊后變?yōu)辄S色。

效果如圖

"router-link"各種屬性解釋

在vue1.0版本的超鏈接標(biāo)簽還是原來的a標(biāo)簽，鏈接地址由v-link屬性控制

而vue2.0版本里超鏈接標(biāo)簽由a標(biāo)簽被替換成了router-link標(biāo)簽，但最終在頁面還是會(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ì)重載頁面，使用router-link，此標(biāo)簽會(huì)被vue所監(jiān)聽，跳轉(zhuǎn)鏈接時(shí)就不會(huì)刷新頁面了。當(dāng)然這個(gè)人理解，不對(duì)之處有望指正。

"router-link"屬性

1.":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>

2."replace" 屬性

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

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

3."tag" 屬性

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

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染結(jié)果 -->
<li>Home</li>

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

4."active-class" 屬性

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

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

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

可以在router.js里面設(shè)置

const router = new VueRouter({
? mode: 'hash',
? linkActiveClass: 'u-link--Active', // 這是鏈接激活時(shí)的class
})

5."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下

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論