Vuetab是一个基于Vue.js的标签切换组件，它可以帮助我们实现页面上的标签切换功能。Vuetab的使用非常简单，只需要在Vue实例中引入Vuetab组件，然后在模板中使用vuetab标签即可。
首先，我们需要在项目中安装Vuetab。可以使用npm或yarn来安装Vuetab。
```
npm install vuetab
```
或者
```
yarn add vuetab
```
安装完成后，我们需要在Vue实例中引入Vuetab组件。
```javascript
import Vue from 'vue'
import Vuetab from 'vuetab'
Vue.use(Vuetab)
```
然后，在模板中使用vuetab标签来创建标签切换组件。
```html
<template>
<div>
<vuetab :tabs="tabs" :active-tab="activeTab" @tab-change="handleTabChange">
<template v-slot:content1>
<p>这是标签1的内容</p >
</template>
<template v-slot:content2>
<p>这是标签2的内容</p >
</template>
<template v-slot:content3>
<p>这是标签3的内容</p >
</template>
</vuetab>
</div>
</template>
```
在上面的代码中，我们通过tabs属性传递了一个包含标签信息的数组，active-tab属性指定了当前选中的标签，tab-change事件监听标签切换事件，handleTabChange方法会在标签切换时被调用。
接下来，我们需要在data中定义tabs和activeTab。
```javascript
data() {
return {
tabs: [
{ label: '标签1', value: 'tab1' },
{ label: '标签2', value: 'tab2' },
{ label: '标签3', value: 'tab3' }
],
activeTab: 'tab1'
}
},
```
在上面的代码中，我们定义了一个包含三个标签的tabs数组，每个标签包含一个label和一个value属性。activeTab指定了当前选中的标签的value。
最后，我们需要在methods中定义handleTabChange方法。
```javascript
methods: {
handleTabChange(tab) {
this.activeTab = tab
}
}
```
在上面的代码中，handleTabChange方法会接收一个参数tab，它表示切换后的标签的value。我们可以通过修改activeTab的值来更新当前选中的标签。
至此，我们已经完成了Vuetab的基本使用。当我们点击不同的标签时，会触发tab-change事件，handleTabChange方法会被调用，然后更新activeTab的值，从而实现标签切换的功能。
除了基本的标签切换功能，Vuetab还提供了一些其他的配置选项，例如可以自定义标签的样式、设置默认选中的标签、禁用某个标签等。具体的使用方法可以参考Vuetab的文档。