css

Question

这会产生一个带下划线的链接：

<li><router-link to="/hello">Hello</router-link></li>

我的理解是router-link元素生成一个a标签。

我在 CSS 中尝试过这些东西：

router-link{
    text-decoration: none;
}

router-link a{
    text-decoration: none;
}

router-link a{
    text-decoration: none !important;
}

..但不幸的是，这些都不起作用。

score 30 · Accepted Answer

如果任何使用 Vuetify 的人遇到这个问题，请注意，由于 Vuetify 的内置样式，下面的样式不起作用。您必须改为使用内联 CSS 样式：

<router-link
 style="text-decoration: none; color: inherit;"
 to="/hello">

score 20 · Accepted Answer

20

您可以尝试像这样定位列表项链接：

li a {
    text-decoration: none;
}

于 2017-06-28T16:59:03.383 回答

score 19 · Accepted Answer

19

它被转换成<a ...
所以删除下划线试试这个

a { text-decoration: none; }

于 2019-06-04T11:35:23.713 回答

score 14 · Accepted Answer

您可以使用 router link 的 tag 属性来使用 li css 类，如下所示：

<li><router-link tag="li" to="/hello">Hello</router-link></li>

该链接现在将使用 li css 属性，但仍像普通路由器链接一样工作。

score 12 · Accepted Answer

Vue 组件标签不会生成 HTML 标签。
在 DOM 检查器中查看实际存在的 HTML 标记。

您需要使用常规的类名。

score 6 · Accepted Answer

添加一个类到路由器链接标签：

<router-link class="routerLink" to="/hello">Hello</router-link>

然后给类css：

.routerLink{
     text-decoration: none;
 }

这应该工作:)

score 1 · Accepted Answer

SCSS

div /deep/ .v-list a {
    text-decoration: none;
}

div >>> .v-list a{
    text-decoration: none;
}

score 0 · Accepted Answer

虽然这个答案似乎很明显。我想我上面的同事忘了提到，如果你在 Laravel 框架中使用 vuetify，这个问题可以解决如下。使用权：

资源\sass\app.scss 文件

并注释掉这一行：

@import '~bootstrap/scss/bootstrap';

这通常可以解决这类问题，实际上是库冲突。

score 0 · Accepted Answer

如果您使用的是 Boostrap 5，则可以使用 text-decoration-none 类

<router-link href="yourlink" class="text-decoration-none" >

</router-link>

请参阅bootsrap 文档以供参考。只是我在我的应用程序中使用 Vue3 的附加信息