关于前端:一个基于vuerouter的tabs组件

46次阅读

共计 1450 个字符，预计需要花费 4 分钟才能阅读完成。

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

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户治理" name="first"><component1></el-tab-pane>
    <el-tab-pane label="配置管理" name="second"><component2></el-tab-pane>
    <el-tab-pane label="角色治理" name="third"><component3></el-tab-pane>
    <el-tab-pane label="定时工作弥补" name="fourth"><component4></el-tab-pane>
  </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	选项卡是否选中