vue实现tab路由切换组件的方法实例 vue实现tab路由切换组件的方法

前言
本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能，下面话不多说了，来一起看看详细的实现代码吧
实现图片如下
【vue实现tab路由切换组件的方法实例】
文章图片

文章图片

下列为实现代码
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')

总结
到此这篇关于vue实现tab路由切换组件的文章就介绍到这了,更多相关vue tab路由切换组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！