[解決済み] VueJSのルータリンクアクティブスタイルの作り方

質問

現在、私のページにはNavigation.vueコンポーネントがあります。 それぞれのナビゲーションをhoverとactiveにしたいのです。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>

ホバーはこのように表示され、アクティブでも全く同じように表示されることが予想されます。

ルータリンクのアクティブ動作のスタイリングについてアドバイスを頂ければ幸いです。 ありがとうございます。

どのように解決するのですか？

この :active擬似クラス は、要素をスタイルするためにクラスを追加することとは異なります。

CSSの:active擬似クラスは、ユーザーによって活性化されている要素（ボタンなど）を表します。 を表します。マウスを使用する場合、"activation" は、通常、マウスボタンが押下されたときに開始され、離されたときに終了します。 となります。

私たちが探しているのは、次のようなクラスです。 .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> . これでコンポーネントは、アクティブなクラスが / .

CSS

これらのクラスを使って、以下のように要素をスタイル付けすることができます。

 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>