環境
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 のリファレンスを読みましょう(反省)