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

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

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

Answer 1

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

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

Answer 2

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

a { text-decoration: none; }

Answer 3

您可以使用路由器链接的标签属性来使用 li css 类，如下所示：

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

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

Answer 4

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

您需要使用常规类名。

Answer 5

您可以尝试定位列表项链接，如下所示：

li a {
    text-decoration: none;
}

Answer 6

向 router-link 标签添加一个类：

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

然后将 css 提供给类：

.routerLink{
     text-decoration: none;
 }

这应该有效:)