vue实现tab路由切换组件

使用vue自带的vue-router.js路由实现分页切换功能

实现图片如下

下列为实现代码

css:

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

html:

    

        

            第一页
        
        

            第二页
        
        

            第三页
        
    
    

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')