vue實現(xiàn)tab路由切換組件的方法實例
更新時間：2021年05月07日 09:05:52 作者：禁花
這篇文章主要給大家介紹了關于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.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
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-12
這篇文章主要為大家詳細介紹了vue iview多張圖片大圖預覽、縮放翻轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實例的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了深入理解Vue 單向數(shù)據(jù)流的原理，詳細的介紹了Vue 單向數(shù)據(jù)流的原理和使用，具有一定的參考價值，有興趣的可以了解一下2017-11-11
vue利用better-scroll實現(xiàn)輪播圖與頁面滾動詳解
在我們日常的項目開發(fā)中，處理滾動和輪播圖是再常見不過的需求了，下面這篇文章主要給大家介紹了關于vue利用better-scroll實現(xiàn)輪播圖與頁面滾動的相關資料，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-10-10
時分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因為月是1-12月,而時分秒是0-23和0-59,下面這篇文章主要給大家介紹了關于vue中如何利用js函數(shù)截取時間的年月日時分秒的相關資料,需要的朋友可以參考下2022-11-11
基于vue2.0+vuex的日期選擇組件功能實現(xiàn)
這篇文章主要介紹了 基于vue2.0+vuex的日期選擇組件功能實現(xiàn)，詳細介紹了使用vue編寫的日期組件,，非常具有實用價值，需要的朋友可以參考下。2017-03-03