Vue Routerを使うなら知っておきたいTipsその1

Vue Routerを使うときに知っておくとちょっと便利なTipsその1です。

router-link要素はv-onディレクティブが反応しない

v-onディレクティブが反応しないとはどういうことかというと、v-on:click="" やv-on:mouseover といった v-on:k="" の部分が反応しない、ということです。
v-on:は@に省略できるので、@click="" とか @mouseover="" と書いたほうが馴染みがあるかもしれません。
router-link要素でこのv-onディレクティブを使用する場合は、.native 修飾子を使用します。
v-on:click.native="" や@click.native=""のように書くことで、ネイティブイベントをバインディングする形で使用することができます。

表示しているパスで要素を出し分けることができる

現在表示しているパスで条件分岐したいとき、v-if で分岐することできます。
例えば、/hoge/ というパスを表示しているときは v-if="this.$route.path.match(/hoge\/$/) で要素の出し分けが可能です。
特定のページで何かしたいというときには、this.$route.path.match を使うと便利です。

router-link要素に簡単にアクティブクラスを付けることができる

router-link要素で現在表示している要素にアクティブクラスを付けたいというときには、exact-active-classを追加するだけで対応することができます。
例えば、表示しているパスとrouter-link要素の:toディレクティブが完全一致するときにcurrentというクラスを付けたい場合、exact-active-class="current" を追加するだけでcurrentクラスが付与されます。
if文も不要で簡単なので、覚えておくと便利です。

methodsからもパスを変更できる

表示している要素ではなく、何かの条件やアクションでパスを書換えたい時に、methodsからもパスを変更することができます。
this.$router.push({ path: '/hoge/' }); という処理を追加すると、この処理の実行時にパスが書き換わります。

最後に

ご紹介した実装方法は、他の方法でも実現できるものもありますが、ひとまずはこちらの方法を覚えておくと、役に立つこともあるかと思います。

SNSでシェアする:

大場 正樹 / Cleysense株式会社 代表

Web制作会社に約3年勤務した後にフリーランスとしてWeb制作やWebマーケティングなどの事業で約6年活動し、事業拡大に伴い2019年7月にクライアントのWebマーケティング活動もサポートするWeb制作会社としてCleysense株式会社を設立。