A project has recently ended, and the project structure is summarized. First look at the general layout structure of this project
Homepage (Figure 1)
Personal Center (Figure 2)
First look at Figure 1. It is divided into three parts at the bottom of the header content. The code structure is as follows
Then this configured file is of course used in the configuration route.
After these routes are configured, start to integrate and use it in
main.js. 1 A layout process for the home page. Most students can also think of it, the focus is on the following.
Questions , on the personal center page, in the content area on the right of the left menu. And the same goes for the head and bottom. Then proceed to code.
Click the menu on the left, and the content area on the right will display the corresponding content, package each page separately, and then add some controls to display.
But there is a problem with this. If the page displayed on the right is only for display, and there is no operation based on this page, then it is ok;;; if there are other operations on this page, such as jumping to details, the display must still be In the personal center, the left menu bar is still required, so that the page expansion will be limited.
Solution You might as well take the interface of the personal center and build the structure again; head-left menu-bottom right content. Then in the routing configuration, write a copy similar to the configuration structure in Figure 1;
this way, subsequent function additions are also easy to maintain.
Finally, add that
careful students may see such code
<router-view v-slot="{ Component, route }">
<transition
:name="route.meta.transition || 'fade-transform'"
mode="out-in"
>
<component :is="Component" :key="route.fullPath" />
</transition>
</router-view>
Analysis of router-view
The Component in the v-slot of <router-view> is a component option object. If you view it in the console of the browser, it is similar to the following structure
and the route is RouteLocationNormalized. You can get the Component in RouteLocationNormalized Parameters, such as your custom content in meta
Analysis of the transition component
We can pass a name prop to the Transition component to declare a transition effect name
. For a transition effect with a name, the transition class that works on it will be prefixed with its name instead of v. For example, the class applied in the example above would be fade-transform-enter-active instead of v-enter-active.
The mode attribute is a transition mode.
We may want to perform the leaving animation first, and then perform the element's entering animation after it completes. Manually arranging such animations is very complicated, but fortunately, we can achieve it by passing in a mode prop. If you
want to know more about vue's own components, you can
link: https://cn.vuejs.org/guide/built-ins/ transition.html#javascript-hooks