Vue Routerでactiveなrouter-linkをBootstrapで修飾したい

by

Vue.js を使っているけどBootstrapでも修飾したい、そんな時ありますよね。私はあります。

最近Vue Routerも使ってみているのですが、<router-link to:>でアクティブになった時、BootstrapのNav Barを使っているので、クラス名にActiveを付与したい、というのをどうすれば良いか調べてみました。

というかコンソールエディター見たらわかるのですが、router-linkもちゃんとActiveなものにはActive属性を付けてくれているのです。それを変更してあげる、という感じで対応していきます。

exact-active-class

exact-active-class type: string default: "router-link-exact-active"Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the linkExactActiveClass router constructor option.

https://router.vuejs.org/api/#exact-active-class

そう、デフォルトでは"exact-router-link-active"となっているものをBootstrap用のものに変更します。

<router-link to='home' class='nav-link' exact-active-class="active">Home</router-link>

Vue.js、細かいところまで手が届きますね。こう色々対応されているとロックインされがちな私です。。