Nuxt3でナビゲーションリンクの選択ステータスをエレガントに実装する方法は？

NUXT3は、ナビゲーションリンクの選択ステータスをエレガントに実装します

NUXT3の開発では、ユーザーエクスペリエンスを強化するために、ナビゲーションリンクにチェック状態を追加することが重要です。この記事では、NUXT3でこの効果を達成する方法を詳細に説明し、写真に示されている問題を解決します。

画像は強調表示されていることを示しています<a></a>ラベル。実装の鍵は、NUXT3ルーティングシステム（ .router-link-activeおよび.router-link-exact-active ）によって提供される2つのプリセットクラス名を利用することです。

.router-link-activeクラスには、現在のルートパスが含まれます。<nuxt-link></nuxt-link>コンポーネントターゲットパスを自動的に追加します。例えば、<nuxt-link></nuxt-link>ポイント/about 、現在のルートは/about/contactです。次に、 .router-link-activeクラスが追加されます<nuxt-link></nuxt-link>優れた。

.router-link-exact-activeクラスは、現在のルートパスがある場合にのみ、より厳格です<nuxt-link></nuxt-link>コンポーネントターゲットパスが正確に一致している場合にのみ追加されます。上記の例に従って、 .router-link-exact-activeクラスは、現在のルートの/aboutにのみ追加されます。

したがって、これら2つのクラス名のCSSスタイルを書くだけで、選択した状態を実現できます。例えば：

 .router-link-active {
  バックグラウンドカラー：＃f0f0f0;
  色：＃333;
}

.Router-Link-Exact-Active {
  font-weight：bold;
}

このCSSコードは、選択したリンクの背景を明るい灰色に変更し、フォントは濃い灰色になります。正確に一致すると、フォントは太字です。スタイルは、設計のニーズに応じて調整できます。 assets/cssディレクトリ内のスタイルファイルなど、NUXT3プロジェクトにCSSコードを追加することを忘れないでください。これにより、NUXT3ナビゲーションリンクの選択したステータスを簡単に実現できます。

以上がNuxt3でナビゲーションリンクの選択ステータスをエレガントに実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。