vue-router 現在のパスによってスタイルを変更する
vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。
現在表示しているページ（パス）を取得して、対象のパスなら対象のリンクにスタイルまたはクラスを設定します。
以下のようにvue-routerで用意されたrouter-linkを使用する場合は、該当のパスの場合はrouter-link-activeというクラスが付与されます。
exactの属性をつけるとURLが/fooの場合のみ有効と判定され、/foo/barといった下の階層の場合はrouter-link-activeは付与されなくなります。
<router-link tag="div" to="/foo" exact>
<a>リンク</a>
</router-link>router-linkを使用しない場合
router-linkを使用せずに普通のhtmlタグで同じように対象のURLの場合はrouter-link-activeのクラスを付与したい場合は以下のようにします。
<div :class="{'router-link-active': $route.path === '/foo'}">
<a>リンク</a>
</div>上記の例は===の完全一致で判定しているので、exactの属性をつけたパターンになります。
exactをつけないパターンにしたい場合や独自にアクティブか判定したい場合は以下のようにcomputedの処理で独自のファンクションを実装して判定します。
<template>
<div :class="{'router-link-active': isActive}">
<a>リンク</a>
</div>
</template>
<script>
export default {
computed: {
isActive () {
// 独自の判定処理
}
}
};
</script>