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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
- vue實(shí)現(xiàn)tab欄切換效果
- Vue中的table表單切換實(shí)現(xiàn)效果
- vue+iview?Table表格多選切換分頁(yè)保持勾選狀態(tài)
- vue?router如何實(shí)現(xiàn)tab切換
- vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
- Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解
相關(guān)文章
Vue使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Vue中使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05解決Vue-cli3沒(méi)有vue.config.js文件夾及配置vue項(xiàng)目域名的問(wèn)題
這篇文章主要介紹了解決Vue-cli3沒(méi)有vue.config.js文件夾及配置vue項(xiàng)目域名的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)詳解
在我們?nèi)粘5捻?xiàng)目開(kāi)發(fā)中,處理滾動(dòng)和輪播圖是再常見(jiàn)不過(guò)的需求了,下面這篇文章主要給大家介紹了關(guān)于vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-10-10vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開(kāi)始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn),詳細(xì)介紹了使用vue編寫(xiě)的日期組件,,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03