JavaScript を使用して要素のスタイルを変更する場合、履歴を返すときにこれをどのように実現できますか?

Question

ナビゲーション バーでは、アクティブ リンク スタイルを使用しました。たとえば、ナビゲーション バーには、当社に関するリンク、お問い合わせ先、資料、クイズなどのリンクがあります。これらのリンクをクリックすると、「http://localhost:3000/about-us」のようにルーティングが変更されます。 http://localhost:3000/material' など、アクティビティ クラスがリンクに適用されて、対応するルート上でリンクが強調表示されます。

リンクを切り替えると、アクティビティ クラスは正しく適用されますが、「/material」から「/home」などの履歴に戻る（ブラウザの戻るボタンを押す）と、アクティビティ クラスが適用されないことに気付きました。適用されます。これは、(戻るをクリックする前に) 同じルート上のリンクに引き続き適用されます。

mounted() で JavaScript を使用して、アクティブ クラス スタイルをナビゲーション リンクに適用し (最初のルートのチェックとスタイルの適用のため)、またリンクがクリックされたときに切り替えるようにしました。

では、歴史を遡っても変わらない理由は何でしょうか?

Answer 1

vue-router とその <router-link> コンポーネントを使用する場合、これを自分で管理する必要はありません :)

このコンポーネントは、特別な CSS クラスを現在のアクティブなリンクに適用します。デフォルトでは、CSS クラスは router-link-active です。

リーリー

ドキュメント: https://router.vuejs.org/api/#active-class

Answer 2

Nuxt のクラスは実際には

であることに注意してください。

• nuxt-link-active
• nuxt-link-exact-active

これは例です: https://nuxtjs.org/examples/routing-active-links-classes

これは次のように構成によって変更できます: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass