SIerだけど技術やりたいブログ

6年目のSIerのブログです

Vuejs vue-router利用時にはアクティブなリンクに自動でクラスを振ってくれる

タイトルでほぼ説明終わり。

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

コンポーネント内にrouter-viewタグがネストしている場合に、アクティブなリンクにcssのスタイルを適用したいとする。

f:id:kimulla:20180115225703g:plain

Vuejsだけの知識で解決しようとすると、以下のように書ける。

<template>
  <div>
    <ul>
      <!-- class属性を割り当てる -->
      <li :class="{ active : this.$route.path.match(/articles\/stark/) }">
        <router-link to="/articles/stark">Stark</router-link>
      </li>
      <li :class="{ active : this.$route.path.match(/articles\/tyrell/) }">
        <router-link to="/articles/tyrell">Tyrell</router-link>
      </li>
      <li :class="{ active : this.$route.path.match(/articles\/targaryen/) }">
        <router-link to="/articles/targaryen">Targaryen</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped="scoped">
.active > a{
  color: red;
  border: solid;
}
</style>

上記のように自分でアクティブなクラスを割り当てるのは、URLが変わるたびにclassの式を変える必要が出てきて変更に弱くなる。なので、なるべく控えたい。


なんかいい方法ないかなとリファレンス見たら、ズバリそのものが…!

router-link · vue-router

router-link コンポーネントはアクティブなタグには自動でクラスを振るらしく、確認すると確かにその通り。

f:id:kimulla:20180115230028p:plain

しかも exact-active-class でクラス名の変更もできるので、cssフレームワークのルールに応じた名前に変えられる、と。

  <router-link to="/article/stark" exact-active-class="active">Stark</router-link>

いやーリファレンスはこまめにチェックしないとダメですね。