Vue tabs navbar是Vue.js框架中非常常见的一种组件，主要用于构建网站或应用程序的标签页选项卡和导航菜单。它允许您轻松创建标签页，支持多个选项卡和菜单项，在不同的选项卡和菜单项之间快速切换，从而为用户提供更好的用户体验。

<template>
  <div>
    <div class="tabs">
      <ul>
        <li v-for="(tab, index) in tabs"
          :key="index"
          @click="selectedTab = tab"
          :class="{ 'is-active': selectedTab === tab }"><a>{{ tab }}</a></li>
      </ul>
    </div>
    <div class="tab-details">
      <slot :name="selectedTab"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      selectedTab: 'Home'
    }
  }
}
</script>

在上述代码中，我们首先定义了一个tabs数组，该数组包含了我们需要创建标签页的选项卡名称，即Home、About、Contact。然后我们定义了一个selectedTab变量来存储当前选中的选项卡名称，我们默认设置selectedTab为Home。接下来，在模板中使用v-for指令遍历tabs数组，动态输出选项卡的li标签，当用户点击某个选项卡时，我们通过绑定@click事件将选项卡名称赋值给selectedTab变量，从而改变当前选中的选项卡。最后，我们使用Vue.js中的插槽概念，在tab-details div中动态渲染当前选中选项卡的内容。