web-dev-qa-db-fra.com

vue-router: comment supprimer le soulignement du routeur-lien

Il en résulte un lien souligné:

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

Ma compréhension est que l'élément router-link Génère une balise a.

J'ai essayé ces choses dans le CSS:

router-link{
    text-decoration: none;
}

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

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

..mais malheureusement aucun de ces travaux.

cssvue.jsvuejs2vue-routerrouterlink
9
rpivovar

Les balises de composant Vue ne génèrent pas de balises HTML.
Regardez dans l'inspecteur DOM pour voir quelles balises HTML existent réellement.

Vous devez utiliser des noms de classe normaux.

4
SLaks

Vous pouvez essayer de cibler le lien d'élément de liste comme ceci:

li a {
    text-decoration: none;
}
9
Emma Earl Kent

Il est converti en <a ...
Pour supprimer le soulignement, essayez ceci

a {  text-decoration: none;}
3
JPilson

Ajoutez une classe à la balise router-link:

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

Donnez ensuite css à la classe:

.routerLink{
     text-decoration: none;
 }

Cela devrait fonctionner :)

1
Nobin Jacob

Si quelqu'un utilisant Vuetify rencontre cette question, notez que les réponses de style ci-dessus ne fonctionnent pas en raison des styles intégrés de Vuetify. Vous devez plutôt utiliser le style CSS en ligne:

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

Vous pouvez utiliser la balise prop du lien du routeur pour utiliser la classe li css comme ceci:

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

Le lien utilisera désormais les propriétés li css mais fonctionnera toujours comme un lien de routeur normal.

0
alexcodes