vue實現(xiàn)tab路由切換組件的方法實例
前言
本文介紹的是使用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')
總結
到此這篇關于vue實現(xiàn)tab路由切換組件的文章就介紹到這了,更多相關vue tab路由切換組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例
這篇文章主要為大家介紹了Vue中使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下2023-07-07vue利用better-scroll實現(xiàn)輪播圖與頁面滾動詳解
在我們日常的項目開發(fā)中,處理滾動和輪播圖是再常見不過的需求了,下面這篇文章主要給大家介紹了關于vue利用better-scroll實現(xiàn)輪播圖與頁面滾動的相關資料,文中給出了詳細的示例代碼供大家參考學習,需要的朋友們下面來一起看看吧。2017-10-10基于vue2.0+vuex的日期選擇組件功能實現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實現(xiàn),詳細介紹了使用vue編寫的日期組件,,非常具有實用價值,需要的朋友可以參考下。2017-03-03