CSS vue-router：如何从路由器链接中删除下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44808474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue-router : how to remove underline from router-link
提问by rpivovar
This results in an underlined link:
这会产生一个带下划线的链接：
<li><router-link to="/hello">Hello</router-link></li>
My understanding is that the router-linkelement generates an atag.
我的理解是router-link元素生成一个a标签。
I've tried these things in the CSS:
我在 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.
..但不幸的是，这些都不起作用。
采纳答案by SLaks
Vue component tags don't generate HTML tags.
Look in the DOM inspector to see what HTML tags actually exist.
Vue 组件标签不会生成 HTML 标签。
在 DOM 检查器中查看实际存在的 HTML 标签。
You need to use regular classnames.
您需要使用常规类名。
回答by Emma Earl Kent
You can try targeting the list item link like this:
您可以尝试像这样定位列表项链接：
li a {
text-decoration: none;
}
回答by JPilson
It is Converted into <a ...
So to remove the underline try this
它被转换成<a ...
所以删除下划线试试这个
a { text-decoration: none;}
回答by alexcodes
You can use the tag prop of router link to use the li css class like this:
您可以使用路由器链接的标签属性来使用 li css 类，如下所示：
<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.
该链接现在将使用 li css 属性，但仍像普通路由器链接一样工作。
回答by Nobin Jacob
Add a class to router-link tag:
向 router-link 标签添加一个类：
<router-link class="routerLink" to="/hello">Hello</router-link>
Then give css to the class:
然后将 css 提供给类：
.routerLink{
text-decoration: none;
}
This should work :)
这应该有效:)
回答by Winters
If anyone using Vuetify comes across this question, note that the styling answers above do not work due to Vuetify's in built styles. You must instead use inline CSS styling:
如果任何使用 Vuetify 的人遇到这个问题，请注意，由于 Vuetify 的内置样式，上面的样式答案不起作用。您必须改为使用内联 CSS 样式：
<router-link
style="text-decoration: none; color: inherit;"
to="/hello" }}">
回答by Kowayne Wynter
SCSS
社会保障局
div /deep/ .v-list a {
text-decoration: none;
}
CSS
CSS
div >>> .v-list a{
text-decoration: none;
}
