強制更新後、ルートが変更されたときに Vuetify の下部ナビゲーションがアクティブ状態を削除できません

Question

私のアプリでは、下部のナビゲーション コンポーネントを次のように設定しています:

リーリー

これはうまく機能し、期待どおりにアプリ内を移動するために使用できます。下部ナビゲーションのボタンをクリックすると、ボタンのステータスが更新され、アクティブ (原色) が表示されます。

私のルートは次のように定義されています:

リーリー

追加のルート /settings もあります。これは下部ナビゲーションの一部ではありませんが、アプリのタイトル バーで次のように定義されています。 リーリー

設定ボタン/ルート リンクは下部ナビゲーションの一部ではないため、設定ボタンをクリックすると下部ナビゲーション ボタンのアクティブ状態が無効になります。これは下部ナビゲーションの一部ではないため、これは正しいことです。

奇妙な動作が発生する場所:

下部のナビゲーションで定義されたルート内にいるときにページを強制的に更新すると、正しい場所に更新されます。ここから、設定ボタンをクリックすると、ルーターに設定が表示されますが、下部のナビゲーションの古いステータスがまだアクティブとして表示されます。これは強制更新時にのみ発生します。下部のナビゲーション ルートを選択して設定に移動すると、下部のナビゲーション ボタンからアクティブ状態が削除されます。

私の調査では、これはルーティング リンクの

exact 属性に問題があるのではないかと考えましたが、違いはないようです。

また、小さいサイズ以下で下部のナビゲーションバーを表示するブレークポイントを設定しました。ウィンドウを拡大して下部のナビゲーションバーを非表示にし、ウィンドウを縮小して再表示すると、コンポーネントが再度表示されると、正しいステータスになります。 。

Answer 1

ページをリロードすることだけがこのエラーを再現する唯一の方法ではありません。ナビゲーション グループのボタンは、VItemGroup ロジックと VBtn の routable mixin を介して切り替えられるようです。ナビゲーション ボタンを 2 回クリックし、その後 /settings にルーティングすることで問題を再現できます。その状態の要素をチェックすると、アクティブ クラス v-btn--active が 3 回繰り返されます。別のページにルーティングすると、完全に一致する v-btn--active v-btn--active のみが削除され、3 番目のページは要素上に残ります。

明らかに、これは予期された動作ではありません。

しかし、解決策は非常に簡単です。各ボタンの active-class 属性を 'v-btn--active' 以外の値に設定すると、問題は解決します。

つまり、たとえば:

リーリー