前言

本文介紹的是使用vue自帶的vue-router.js路由實現(xiàn)分頁切換功能，下面話不多說了，來一起看看詳細的實現(xiàn)代碼吧

實現(xiàn)圖片如下

下列為實現(xiàn)代碼

css:

*{ margin: 0; padding: 0;}#app ul{ width: 300px; height: 30px; list-style: none;}#app>ul>li{ width: 100px; height: 30px; float: left;}

html:

<div id='app'> <ul><li> <router-link to='/dyy'>第一頁</router-link></li><li> <router-link to='/dey'>第二頁</router-link></li><li> <router-link to='/dsy'>第三頁</router-link></li> </ul> <router-view></router-view></div> <template id='DyyDay'> <div><ul> <li>News 01</li> <li>News 02</li> <li>News 03</li></ul> </div></template> <template id='DeyDay'> <div><ul> <li>message 01</li> <li>message 02</li> <li>message 03</li></ul> </div></template> <template id='DsyDay'> <div><h1>Home</h1><router-link to='/dsy/home1'>home1</router-link><router-link to='/dsy/home2'>home2</router-link><router-view></router-view> </div></template> <template id='home1'> <h1>我是home1</h1></template> <template id='home2'> <h1>我是home2</h1></template>

js.

let Dyy={template:`#DyyDay`}; let Dey={template:`#DeyDay`}; let Dsy={template:`#DsyDay`}; let home1={template:`#home1`}; let home2={template:`#home2`}; let router=new VueRouter({routes:[ { path:’/’,redirect:'dyy' }, { path:’/dyy’,component:Dyy }, { path:’/dey’,component:Dey }, { path:’/dsy’,component:Dsy ,children:[ {path:’/dsy/home1’,component:home1}, {path:’/dsy/home2’,component:home2}] }] }); let app=new Vue({router }).$mount(’#app’)

總結(jié)

到此這篇關(guān)于vue實現(xiàn)tab路由切換組件的文章就介紹到這了,更多相關(guān)vue tab路由切換組件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！