1. 商品ナビの表示・非表示
「src/components/TypeNav/index.vue」を開き、製品ナビゲーションをデフォルトで表示するようにします
TypeNav コンポーネントが実装されている場合、現在のルートが "/home" であるかどうかを判断し、"/home" でない場合は、カテゴリ ナビゲーションを非表示にします
マウスが移動したとき
入居時にアイテムナビを表示する
退去時
退去時、現在のルートが「/home」かどうかを判断し、そうでない場合はカテゴリナビを隠す
2. 商品ナビ表示・非表示時の遷移アニメーション
遷移アニメーションの前提は次のとおりです。遷移アニメーションを実行するには、コンポーネント/要素に v-if または v-show 命令が必要です。
3. 最適化 (コンポーネントが切り替えられると、1 つの要求のみが送信されます)
これで、ホーム ルートと検索ルートの間をジャンプするたびにリクエストを開始します
この現象の原因は、ホームにジャンプしてルートを検索するたびに TypeNav コンポーネントが 1 回マウントされ、マウントされるたびに mount が実行され、リクエストを送信する手順が実行されるためです。
行 this.$store.dispatch("categoryList"); を "src/components/TypeNav/index.vue" から "src/App.vue" に移動するだけです。
App.vue はルート コンポーネントであるため、一度だけマウントされ、ルーティング ジャンプ時に再度マウントされることはありません。
TypeNav グローバル コンポーネントは Search モジュールでも使用されるため、