vue-router：如何从 router-link 中删除下划线

Question

这导致带下划线的 link:

<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;
}

..但不幸的是 none 这些工作。

Answer 1

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

您需要使用常规类名。

Answer 2

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

li a {
    text-decoration: none;
}

Answer 3

转换为<a ...
所以要删除下划线试试这个

a { text-decoration: none; }

Answer 4

你可以使用路由器 link 的 tag prop 来使用 li css class 像这样：

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

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

Answer 5

将 class 添加到路由器-link 标签：

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

然后把css给class:

.routerLink{
     text-decoration: none;
 }

这应该有效:)

Answer 6

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

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

Answer 7

SCSS

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

CSS

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

Answer 8

虽然这个答案看起来很明显。 我想我上面的同事忘了提到，如果你使用 vuetify 和 Laravel 框架，这个问题可以按如下方式解决。 访问：

resources\sass\app.scss file

并注释掉这一行：

@import '~bootstrap/scss/bootstrap';

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

Answer 9

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

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

</router-link>

参见 bootsrap documentation 以供参考。只是附加信息我在我的应用程序中使用 Vue 3

Answer 10

即使在 React-Router。 Link 标签使文本带有下划线。因为标签内的任何文本（h1、h3、p）都被转换为锚标签，所以：

a{text-decoration: none;}