vue實(shí)現(xiàn)tab路由切換組件的方法實(shí)例
前言
本文介紹的是使用vue自帶的vue-router.js路由實(shí)現(xiàn)分頁(yè)切換功能,下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的實(shí)現(xiàn)代碼吧
實(shí)現(xiàn)圖片如下
下列為實(shí)現(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'>第一頁(yè)</router-link></li><li> <router-link to='/dey'>第二頁(yè)</router-link></li><li> <router-link to='/dsy'>第三頁(yè)</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實(shí)現(xiàn)tab路由切換組件的文章就介紹到這了,更多相關(guān)vue tab路由切換組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. Net core中使用System.Drawing對(duì)上傳的圖片流進(jìn)行壓縮(示例代碼)2. Python使用sql語(yǔ)句對(duì)mysql數(shù)據(jù)庫(kù)多條件模糊查詢的思路詳解3. Ajax實(shí)現(xiàn)局部刷新的方法實(shí)例4. 如何用JS WebSocket實(shí)現(xiàn)簡(jiǎn)單聊天5. 小區(qū)后臺(tái)管理系統(tǒng)項(xiàng)目前端html頁(yè)面模板實(shí)現(xiàn)示例6. 小技巧處理div內(nèi)容溢出7. 在JSP頁(yè)面中動(dòng)態(tài)生成圖片驗(yàn)證碼的方法實(shí)例8. CSS3使用過(guò)度動(dòng)畫和緩動(dòng)效果案例講解9. HTML iframe標(biāo)簽用法案例詳解10. li中插入img圖片間有空隙的解決方案
