'vue-router : how to remove underline from router-link
This results in an underlined link:
<li><router-link to="/hello">Hello</router-link></li>
My understanding is that the router-link element generates an a tag.
I've tried these things in the CSS:
router-link{
text-decoration: none;
}
router-link a{
text-decoration: none;
}
router-link a{
text-decoration: none !important;
}
..but unfortunately none of these work.
Solution 1:[1]
Vue component tags don't generate HTML tags.
Look in the DOM inspector to see what HTML tags actually exist.
You need to use regular classnames.
Solution 2:[2]
If anyone using Vuetify comes across this question, note that the styling below do not work due to Vuetify's in built styles. You must instead use inline CSS styling:
<router-link
style="text-decoration: none; color: inherit;"
to="/hello">
Solution 3:[3]
You can try targeting the list item link like this:
li a {
text-decoration: none;
}
Solution 4:[4]
It is Converted into <a ...
So to remove the underline try this
a { text-decoration: none; }
Solution 5:[5]
You can use the tag prop of router link to use the li css class like this:
<li><router-link tag="li" to="/hello">Hello</router-link></li>
The link will now use li css propertys but still work as like a normal router link.
Solution 6:[6]
Add a class to router-link tag:
<router-link class="routerLink" to="/hello">Hello</router-link>
Then give css to the class:
.routerLink{
text-decoration: none;
}
This should work :)
Solution 7:[7]
SCSS
div /deep/ .v-list a {
text-decoration: none;
}
CSS
div >>> .v-list a{
text-decoration: none;
}
Solution 8:[8]
Even in React-Router. The Link tag makes the text underlined. Because any text (h1, h3, p) inside tag are converted to anchor tags so:
a{text-decoration: none;}
Solution 9:[9]
Although this answer seems quite obvious. I think my colleagues above forgot to mention that if you are using vuetify with the Laravel framework this problem can be solved as follows. Access:
resources\sass\app.scss file
And comment out the line:
@import '~bootstrap/scss/bootstrap';
This usually resolves this type of problem, which is actually a library conflict.
Solution 10:[10]
If you are using Boostrap 5 you can use the class text-decoration-none
<router-link href="yourlink" class="text-decoration-none" >
</router-link>
see bootsrap documentation for reference. Just an additional information I am using Vue3 in my application
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow