【VueRouter】 active-classでrouter-linkのスタイルを変更する

active-class属性:そのrouter-linkがアクティブになっている時に有効になるクラス。以下はフォントサイズを変更している。

<template>
    <router-link active-class="link--active" 
                 exact
                 to="/"
                 >Home</router-link>

<style scoped>
.link--active {
    font-size: 20px;
}

※包含的なマッチ:全てのurlには/が含まれるため、常に/のrouter-linkがアクティブになっている。exact属性をつけることで完全一致になる。