vue?router-link下劃線和顏色問題如何解決

這篇文章主要介紹了vue router-link下劃線和顏色問題如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue router-link下劃線和顏色問題如何解決文章都會有所收獲，下面我們一起來看看吧。

router-link下劃線和顏色問題

使用router-link鏈接的文字，默認為藍色并帶下劃線，很不好看。

解決方法

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

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

a指文字不帶下劃線且為白色，router-link-active指點擊后變為黃色。

效果如圖

"router-link"各種屬性解釋

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

而vue2.0版本里超鏈接標簽由a標簽被替換成了router-link標簽，但最終在頁面還是會被渲染成a標簽的

至于為什么要把a換成router-link原因還是有的，比如我們之前一直慣用的nav導航里面結構是（ul>li>a），router-link可以渲染為任何元素，這里可以直接渲染成li標簽，同樣能實現跳轉效果，節省了a標簽的使用，還有一個原因可能是因為a標簽正常是鏈接的跳轉的作用，點擊a時可能會重載頁面，使用router-link，此標簽會被vue所監聽，跳轉鏈接時就不會刷新頁面了。當然這個人理解，不對之處有望指正。

"router-link"屬性

1.":to" 屬性

相當于a標簽中的"herf"屬性，后面跟跳轉鏈接所用

<router-link :to="/home">Home</router-link>
<!-- 渲染結果 -->
<a href="/home" rel="external nofollow" >Home</a>

2."replace" 屬性

replace在routre-link標簽中添加后，頁面切換時不會留下歷史記錄

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

3."tag" 屬性

具有tag屬性的router-link會被渲染成相應的標簽

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

此時頁面的li同樣會起到a鏈接跳轉的結果，vue會自動為其綁定點擊事件，并跳轉頁面

4."active-class" 屬性

這個屬性是設置激活鏈接時class屬性，也就是當前頁面所有與當前地址所匹配的的鏈接都會被添加class屬性

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

active-class屬性的默認值是router-link-active,所以如果沒有設置，就會被渲染為這個class

可以在router.js里面設置

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

5."exact" 屬性

開啟router-link的嚴格模式

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

上面這個標簽如果不加exact屬性，則會在vue2.leenty.com/article頁面下也會被匹配到，

這卻不是我們的本意,在加了這個屬性后就會正確的匹配到vue2.leenty.com下

關于“vue router-link下劃線和顏色問題如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue router-link下劃線和顏色問題如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。