vue-router: как убрать подчеркивание с router-link

Теги компонентов Vue не генерируют теги HTML.
Посмотрите в инспекторе DOM, чтобы узнать, какие теги HTML существуют на самом деле.

Вам нужно использовать обычные имена классов.

Если кто-то, использующий Vuetify, сталкивается с этим вопросом, обратите внимание, что приведенные выше ответы на стили не работают из-за встроенных стилей Vuetify. Вместо этого вы должны использовать встроенные стили CSS:

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

Вы можете попробовать настроить таргетинг на ссылку элемента списка следующим образом:

li a {
    text-decoration: none;
}

Он преобразован в <a ...
Итак, чтобы удалить подчеркивание, попробуйте это

a { text-decoration: none; }

Вы можете использовать тег prop ссылки router, чтобы использовать класс li css следующим образом:

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

Ссылка теперь будет использовать свойства li css, но по-прежнему будет работать как обычная ссылка маршрутизатора.

Добавьте класс в тег router-link:

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

Затем передайте классу css:

.routerLink{
     text-decoration: none;
 }

Это должно работать :)

SCSS

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

CSS

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

Хотя этот ответ кажется вполне очевидным. Я думаю, что мои коллеги выше забыли упомянуть, что если вы используете vuetify с фреймворком Laravel, эту проблему можно решить следующим образом. Доступ:

файл resources \ sass \ app.scss

И закомментируйте строку:

@import '~ bootstrap / scss / bootstrap';

Обычно это решает проблему такого типа, которая на самом деле является конфликтом библиотеки.