Nuxt-link が Bootstrap-vue を使用してページを更新する問題

Question

nuxt とブートストラップを使用して、ナビゲーション用のカスタム ホバー ドロップダウン メニューを構築しています。私が抱えている問題は、ナビゲーション サブメニュー NuxtLinks が、Nuxt ブロック内のアプリケーション コンテンツをスムーズに変更するのではなく、ページ全体を更新していることです。ナビゲーション バーは、default.vue レイアウトで動的に生成され、コンテンツをラップする NuxtLink を持つ b-dropdown-hover コンポーネントを使用します。これらのリンク/アンカーではページが完全に更新されるのに、b-navbar-brand イメージはスムーズに移行するのはなぜですか?申し訳ありませんが、Nuxt は初めてです。このビデオ @ ~1:35:00 は、私がやろうとしていることを示しています。

components/BDropdownHoverRight.vue

リーリー

layouts/default.vue

ああああ

Answer 1

ここには無関係なコードがたくさんあります。時間をかけてきちんとフォーマットしました。次回は自分で作業してください (フォーマットして興味深い部分だけを入力してください)。

さらに、ビデオ自体が問題の解決方法についての答えをすでに提供しています。このビデオでは、a タグと nuxt-link タグの違いについて説明しています。

これは、Bootstrap Vue ドキュメント のこの部分に関連しています。

を参照してください。

したがって、次のようなものを使用する必要があります

リーリー

また、コードがビデオとは大きく異なることにも気付きました。 querySelector は使用しないでください。Nuxt コンポーネントをインポートする必要はありません。また、いくつかの ESlint 警告/エラーが発生します。

すべてを混ぜ合わせるのではなく、研究の 1 つの部分に集中することをお勧めします。さらに先へ進みたいと思うのは問題ありませんが、多くの新しい概念 (Vue/Nuxt) を学習しているときは、あまりにも多くの抽象概念に惑わされないように注意してください。

---

ちなみに、Nuxt の学習を続けたい場合は、これをチェックしてください: https://masteringnuxt.com/ (Nuxt アンバサダーおよび Vue エコシステムの他の著名人によって作成)

Nuxt でプロジェクトの作成をお楽しみください!