Vuetify v-btnルーティングアクティブクラスの問題

Question

Vueを使用してCRUDアプリを作成しています。「to」属性を使用してv-btnsとして定義されているリンクがいくつかあります。ボタンをクリックすると、アクティブなボタンが通常、ユーザーの現在位置に対応するボタンが強調表示されるように変更されますが、次のような2つのルートがあります。

「/ songs/new」
"/曲"

V-btnには次の「to」属性があります。

to： "/ songs/new"
to： "/ songs"

ただし、「/ songs/new」を指すボタンをクリックすると、vuetifyは両方のボタンをアクティブに設定します。なぜこれを行うのか？

Answer 1

exact属性を使用する必要があります。

<v-btn to="/songs/new" exact>Songs</v-btn>
<v-btn to="/songs" exact>New Song</v-btn>

これで、ボタンがアクティブなクラスを取得するのは、ルートに正確に移動した場合のみです。

exact-active-classを使用して、カスタムアクティブクラスを使用することもできます。