Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue-router how to realize component switching function". In daily operation, I believe many people have doubts about how to realize component switching function of vue-router. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "vue-router how to realize component switching function"! Next, please follow the small series to learn together!

First of all, before implementing this requirement, we first analyze or recall which of the demos we have done is similar, I believe many friends will immediately think of---tab switching, then for the design of HTML structure we can switch the structure with the help of tab bar: a big box sets two small boxes, one for container, the other for navigation!

HTML structure

container  home  found   message  my

After finishing the HTML structure, we are dressing the skeleton above. According to the requirement of "bottom fixed", we can easily think of position: fixed. Of course, I also use fixed positioning here, but the layout is flex. When using flex combined with fixed positioning layout, there are often many unnecessary problems, such as: Flex attribute failure, conflict between the two effects, etc., more reasons are caused by "off-label", more of which appear in the parent element flex, child element position, at this time can add a div in the middle to get rid of the two.

CSS style (style form)

.footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h4 font-size 15px font-weight normal margin 0 padding-bottom 5px

After the skeleton and clothes are done, the rough prototype will come out, and half of our requirements will be fulfilled. The rest is the component switch. This is simple, just need to configure the routing table, and then specify jump can be

routing table

routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ]

Finally, add router-view to the "container". Here is the full code:

// HTML  home  found   message  my // css.footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h4 font-size 15px font-weight normal margin 0 padding-bottom 5px// routerexport default new Router ({ routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ]}); At this point, the study of "how to implement component switching function of vue-router" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.