【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属性をつけることで完全一致になる。