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

環境

package.json

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

課題

vue-router利用時に、アクティブなリンクにcssのスタイルを適用したい。

このとき、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構造が変わるたびに修正が必要になるため、変更に弱くなる。

解決方法

何かいい方法ないかなとリファレンス見たら、ズバリそのものが…！
参考: active-class

router-link コンポーネントはアクティブなタグには自動でクラスを振ってくれる。

また、そのクラス名はexact-active-class でカスタマイズができる。 これによって、cssフレームワークのルールに応じた名前に変えられる。

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

この機能を利用することで、URL構造の変更にコード修正なしで対応できる。

結論

すぐに独自実装を考えずに、vue-router のリファレンスを読みましょう(反省)