vue-router：如何从路由器链接中删除下划线答案

【问题标题】：vue-router : how to remove underline from router-linkvue-router：如何从路由器链接中删除下划线
【发布时间】：2017-12-02 04:07:05
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

你需要使用常规的类名。

【讨论】：

【解决方案2】：

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

li a {
    text-decoration: none;
}

【讨论】：

【解决方案3】：

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

a { text-decoration: none; }

【讨论】：

【解决方案4】：

你可以使用router link的tag prop来使用li css类：

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

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

【讨论】：

【解决方案5】：

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

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

然后给类css：

.routerLink{
     text-decoration: none;
 }

这应该可行:)

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

SCSS

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

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

【讨论】：

/deep/ 已弃用 [Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.

【解决方案8】：

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

资源\sass\app.scss 文件

并注释掉该行：

@import '~bootstrap/scss/bootstrap';

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

【讨论】：