一个基于vue-router的tabs组件

前言

此组件主要应用于vue2.0+vue-router3及以上运行的。
主要解决原生tab组件的内容模块不能组件化管理。
参照element-tab组件来说，
假设tab页的内容里面涵盖大量逻辑场景的情况下，那么el-tabs就不那么适用了，并且会影响前端性能，详情见下面代码

而这款tab插件每次切换的时候只会显示当前组件，原理是依据vue-router动态改变router-view name属性来操作的，
router配置:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/views/HelloWorld'
import Show from '@/views/Show'
import Costumer from "@/views/costumer";
import Edu from "@/views/edu";
import Finicial from "@/views/finicial";
import Trade from "@/views/trade";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:"/tabs",
      name:"Tabs",
      component:Show,
      children:[{
        path:"cont",
        name:"Costumer",
        components:{
          default:Costumer,
          costumer:Costumer,
          edu:Edu,
          finicial:Finicial,
          trade:Trade
        },
      }]
    },
  ]
})

router-view name属性动态渲染组件详细配置方法请点击下面链接了解：
https://v3.router.vuejs.org/zh/guide/essentials/named-views.h…

组件接受参数

参数	类型	说明
data	Array[Object]	渲染数据
wrapClass	String	组件包装的类名，用于主题颜色修改

data下Object里的参数	类型	说明
key	Number	渲染数据的用v-key
name	String	选项卡的标题
fadeName	String	选项卡对应路由表里components里的字段名
isActive	Boolean	选项卡是否选中

代码仓库地址:https://github.com/xuxiaoyang883/eazy-tabs

examples目录为示例

dist目录是组件压缩过的版本

packages目录是组件原始代码

本地项目启动指令:
npm i //安装依赖
npm run dev

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net