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

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

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

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