web-dev-qa-db-ja.com

vue-router：router-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;
}

..残念ながら、これらはどれも機能しません。

cssvue.jsvuejs2vue-routerrouterlink
9
rpivovar

VueコンポーネントタグはHTMLタグを生成しません。
DOMインスペクターを調べて、実際に存在するHTMLタグを確認します。

通常のクラス名を使用する必要があります。

4
SLaks

次のようにリストアイテムのリンクをターゲットにしてみてください。

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

<a ...に変換されます
下線を削除するには、これを試してください

a {  text-decoration: none;}
3
JPilson

Router-linkタグにクラスを追加します。

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

次に、CSSをクラスに渡します。

.routerLink{
     text-decoration: none;
 }

これはうまくいくはずです:)

1
Nobin Jacob

Vuetifyを使用している人がこの質問に遭遇した場合、Vuetifyの組み込みスタイルが原因で、上記のスタイリングの回答が機能しないことに注意してください。代わりに、インラインCSSスタイリングを使用する必要があります。

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

ルータリンクのタグプロップを使用して、次のようなli cssクラスを使用できます。

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

リンクはli cssプロパティを使用しますが、通常のルーターリンクのように機能します。

0
alexcodes