web-dev-qa-db-ja.com

VueJSルーターリンクアクティブスタイルの方法

現在、私のページにはNavigation.vueコンポーネントがあります。各ナビゲーションをホバーしてアクティブにします。 「ホバー」は機能しますが、「アクティブ」は機能しません。

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>

これは、ホバーが現在どのように見えるかであり、アクティブでもまったく同じです。 This is how hover looks like now and expected exactly same on active.

ルーターリンクのアクティブな作品をスタイリングするためのアドバイスをいただければ幸いです。ありがとう。

vue.jsvue-routerrouterlink
38
doobean

：active pseudo-class は、要素をスタイルするためにクラスを追加することと同じではありません。

：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-Router

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

このクラスは、ターゲットルートがexact一致の場合、<router-link>コンポーネントに自動的に適用されます。この場合、両方のクラスrouter-link-activeおよびrouter-link-exact-activeがコンポーネントに適用されることを考慮してください。

同じ例を使用して、<router-link to="/foo">および<router-link to="/foo/bar">がある場合、router-link-exact-activeclassはonlyパスが<router-link to="/foo/bar">の場合、/foo/barに適用されます。

正確な小道具

<router-link to="/">があるとしましょう。このコンポーネントはすべてのルートでアクティブになります。これは私たちが望むものではないかもしれないので、exact propを次のように使用できます：<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 prop、<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>
78
Ricky

ルーターを作成するときに、linkExactActiveClassをプロパティとして指定して、アクティブなルーターリンクに使用されるクラスを設定できます。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

これは文書化されています here 。

19
Bert

https://router.vuejs.org/en/api/router-link.html 属性active-class = "active"を追加します。例：

<ul class="nav navbar-nav">
    <router-link tag="li" active-class="active" to="/" exact><a>Home</a></router-link>
    <router-link tag="li" active-class="active" to="/about"><a>About</a></router-link>
    <router-link tag="li" active-class="active" to="/permission-list"><a>Permisison</a></router-link>
</ul>
15
Vi Quang Hòa