私のページには現在、Navigation.vue コンポーネントがあります。各ナビゲーションをホバーしてアクティブにしたいのですが、動作しhoverますが、active動作しません。
Navigation.vue ファイルは次のようになります。
<template>
<div>
<nav class="navbar navbar-expand-lg fixed-top row">
<router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link>
<router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link>
<router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link>
<router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link>
</nav>
</div>
</template>
そして、そのスタイルは次のようになります。
<style>
nav li:hover,
nav li:active {
background-color: indianred;
cursor: pointer;
}
</style>
これが現在のホバーの外観であり、アクティブ時にもまったく同じになることが期待されます。
アクティブな作品のスタイリングについてアドバイスを頂ければ幸いですrouter-link。よろしくお願いします。
ベストアンサー1
の:active 擬似クラス要素にスタイルを設定するためにクラスを追加することとは異なります。
:active CSS 疑似クラスは、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。マウスを使用する場合、通常、「アクティブ化」はマウス ボタンが押されたときに開始され、マウス ボタンを放したときに終了します。
.active私たちが探しているのは、ナビゲーション項目のスタイル設定に使用できるなどのクラスです。
と の違いをより明確に示す例については:active、.active次のスニペットを参照してください。
li:active {
background-color: #35495E;
}
li.active {
background-color: #41B883;
}<ul>
<li>:active (pseudo-class) - Click me!</li>
<li class="active">.active (class)</li>
</ul>Vueルーター
vue-router自動的に2つのアクティブクラス.router-link-activeと.router-link-exact-activeを<router-link>成分。
router-link-active
このクラスは自動的に適用され、<router-link>ターゲット ルートが一致したときにコンポーネントを実行します。
これは包括的一致動作を使用することで機能します。たとえば、<router-link to="/foo">/foo/現在のパスが で始まるか である限り、このクラスが適用されます/foo。
だから、もし私たちが<router-link to="/foo">そして<router-link to="/foo/bar">router-link-active、パスが の場合、両方のコンポーネントが クラスを取得します/foo/bar。
router-link-exact-active
このクラスは自動的に適用され、<router-link>コンポーネントのターゲットルートがちょうどrouter-link-active一致します。この場合、と の両方のクラスrouter-link-exact-activeがコンポーネントに適用されることに注意してください。
同じ例を使って、もし<router-link to="/foo">そして<router-link to="/foo/bar">、router-link-exact-activeクラスはのみ適用される<router-link to="/foo/bar">パスが の場合/foo/bar。
正確な小道具
例えば、<router-link to="/">すると、このコンポーネントはすべてのルートでアクティブになります。これは望ましくないかもしれませんが、exact次のようにプロパティを使用できます。<router-link to="/" exact>. これで、コンポーネントには、 で完全に一致する場合にのみアクティブ クラスが適用されます/。
CS
次のように、これらのクラスを使用して要素のスタイルを設定できます。
nav li:hover,
nav li.router-link-active,
nav li.router-link-exact-active {
background-color: indianred;
cursor: pointer;
}
タグはプロパティ<router-link>を使用して変更されました。tag<router-link tag="li" />
デフォルトのクラスをグローバルに変更する
グローバルに提供されるデフォルトのクラスを変更したい場合は、次のようにインスタンスvue-routerにいくつかのオプションを渡すことで変更できます。vue-router
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
コンポーネントインスタンスごとにデフォルトクラスを変更する（<router-link>）
代わりに、デフォルトのクラスを変更したい場合は、<router-link>グローバルではなく、active-classそしてexact-active-class次のような属性です:
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
vスロットAPI
Vue Router 3.1.0以降では、スコープ付きスロット<li>これは、リスト要素などのラッパー要素にスタイルを適用しながら、ナビゲーション ロジックをアンカー要素に保持したい場合に便利です<a>。
<router-link
to="/foo"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<li
:class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
>
<a :href="href" @click="navigate">{{ route.fullPath }}</a>
</li>
</router-link>