Shulou(Shulou.com)06/01 Report--

This article mainly introduces "the method of vue sub-route jump to achieve tab tab effect". In daily operation, I believe that many people have doubts about the method of vue sub-route jump to achieve tab tab effect. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "vue sub-route jump to achieve tab tab effect". Next, please follow the editor to study!

The layout of the tab tab is very common in the project. In the background management system, the navigation bar is fixed on the left and the corresponding page is on the right. Each time you click the title on the left, only the corresponding page on the right is switching, while vue needs to do the tab tab. It is recommended to use the effect of realizing the a tag, and then use the effect of realizing the slot to "plug" the corresponding page. See the following example for specific implementation:

Vue file

{{item.title}} export default {name: "Index", data () {return {navData: [{title: "title one", src: "/"} {title: "title II", src: "/ nav2"}, {title: "title III" Src: "/ nav3"} .box {width: 100% Height: 100%; display: flex; background: rgba} .left {width:200px; height: 100%; text-align: center; background: rgba; padding: 20px;} .left a {text-decoration: none; display: block; margin-top: 20px Width: 100%; color: # fff;} .right {flex: 1; padding: 20px; color: # fff;}

Router.js

Import Vue from 'vue'import Router from' vue-router'import Index from'. / views/Index.vue'import nav1 from'. / components/Index/nav1.vue'import nav2 from'. / components/Index/nav2.vue'import nav3 from'. / components/Index/nav3.vue'Vue.use (Router) export default new Router ({/ / remove # mode: 'history', base: process.env.BASE_URL, routes: [{path:' /' / / name:' Index', component: Index, children: [{path:'', name:'nav1', component:nav1}, {path:'nav2', name:'nav2', component:nav2}, {path:'nav3' Name:'nav3', component:nav3}]}]})

Note: when you write name: 'Index', in the routes in router.js, there will be the following warning on the console, so you can delete this sentence.

The content of the page to be displayed on the right

This is nav1, this is nav2, this is nav3.

Effect picture

Simple child route jump implementation tab tab effect is realized.

At this point, the study of "vue sub-route jump to achieve tab tab effect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.