vueのコンポーネントのcssをページごとに指定したい

Question

vueの同じコンポーネントを違うページで呼び出して、そのページごとにコンポーネント内のcssを指定したいです。

コンポーネントコード

<template>
 〜省略〜
   <router-link to="〜省略〜"><p class="sample1">sample1</p></router-link>
　　<router-link to="〜省略〜"><p class="sample2">sample2</p></router-link>
　　<router-link to="〜省略〜"><p class="sample3">sample3</p></router-link>
〜省略〜
</template>

したいこと

sample1のページではsample1クラスのbackground-colorを赤にして、sample2のページではsample2を赤にして、、
という風にしたいです。
どこをどうすればよろしいでしょうか。

Comments

[rubytomato]

やりたいことというのは、例えばこのようなコードのとき、

<router-link to="/"><p>sample1</p></router-link>
<router-link to="/users"><p>sample2</p></router-link>
<router-link to="/about"><p>sample3</p></router-link>

・ /usersページを表示したときは<p>sample2</p>の背景色を赤色で表示
・ /aboutページのときは<p>sample3</p>の背景色を赤色で表示

つまりアクティブなリンクだけのp要素の背景色を変えたいということでしょうか?

[masato_]

rubytomato様
はい、そういうことです。。

Answer 1

router-linkのexactプロパティおよびexact-active-classプロパティを使うと実現できると思います。

exactプロパティを使う方法

exactプロパティを使うと、アクティブなリンクにrouter-link-exact-activeというCSSクラスが付与されますので、スタイルはこのCSSクラスで変えることができます。
下記はアクティブなリンクのp要素のcolorを#f00に変える例です。

<template>

  <router-link to="?省略?" exact><p>sample1</p></router-link>
  <router-link to="?省略?" exact><p>sample2</p></router-link>
  <router-link to="?省略?" exact><p>sample3</p></router-link>

</template>

<style>
a.router-link-exact-active p {
  color: #f00;
}
</style>

exact + exact-active-classプロパティを使う方法

exact + exact-active-classプロパティを使うと、アクティブなリンクに任意の名前のCSSクラスを付与できます。
下記はこのリンクがアクティブなときにactiveというCSSクラスが付与される例です。

<router-link to="?省略?" exact exact-active-class="active"><p>sample1</p></router-link>

<style>
a.active p {
  color: #f00;
}
</style>

参考

その他にactive-classプロパティもありますが、詳しくは参考にあげるAPIリファレンスを確認してください。

• exact
• exact-active-class
• active-class

Comments

[masato_]

rubytomato様
ありがとうございました！
無事にできました。

ちなみに、質問なのですが、cssの
a.active p
部分の最初の
a.
とはどういう意味なのでしょうか、、

[rubytomato]

aは<a>タグのことです。よくよく考えたらなくてもいいですね。
以下のように書いても大丈夫だと思います。

.active p {
color: #f00;
}

[masato_]

そうですよね。ありがとうございました。