1. Show and hide product navigation
Open "src/componetnts/TypeNav/index.vue" and let the product navigation default to display
When the TypeNav component is mounted, determine whether the current route is "/home", if not "/home", hide the category navigation
when the mouse moves in
Have item navigation displayed when moving in
when moving out
When moving out, judge whether the current route is "/home", if not, hide the category navigation
2. The transition animation when the product navigation is displayed and hidden
The premise of transition animation is: components/elements must have v-if or v-show instructions to perform transition animation
3. Optimization (only one request is sent when the component is switched)
Now we initiate a request every time we jump between the home route and the search route
The reason for this phenomenon is that each time you jump to the home and search routes, the TypeNav component will be mounted once, and mounted will be executed every time it is mounted, so as to execute the steps of sending the request
We just need to move the line this.$store.dispatch("categoryList"); from "src/components/TypeNav/index.vue" to "src/App.vue"
Since App.vue is the root component, it is only mounted once, and it will not be mounted again when routing jumps
Since the TypeNav global component is also used in the Search module,