当前位置：首页 > VUE

vue实现页签切换

2026-02-23 05:06:17VUE

Vue 实现页签切换的方法

使用动态组件和 v-if/v-show

在 Vue 中，可以通过动态组件或条件渲染指令（v-if/v-show）实现页签切换。动态组件更适合复杂场景，而 v-if/v-show 适合简单切换。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <!-- 方法1: 动态组件 -->
    <component :is="currentTabComponent"></component>
    <!-- 方法2: v-if -->
    <div v-if="currentTab === 'Tab1'">Tab1 内容</div>
    <div v-else-if="currentTab === 'Tab2'">Tab2 内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab1', label: '标签1', component: 'Tab1Component' },
        { name: 'Tab2', label: '标签2', component: 'Tab2Component' }
      ],
      currentTab: 'Tab1'
    };
  },
  computed: {
    currentTabComponent() {
      return this.tabs.find(tab => tab.name === this.currentTab).component;
    }
  }
};
</script>

<style>
.tabs button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用 Vue Router

如果页签切换需要同步 URL 变化，可以使用 Vue Router 的嵌套路由或查询参数。

<template>
  <div>
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path" 
      :to="tab.path"
      active-class="active"
    >
      {{ tab.label }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/tab1', label: '标签1' },
        { path: '/tab2', label: '标签2' }
      ]
    };
  }
};
</script>

使用第三方库

对于更复杂的页签需求，可以使用如 vue-tabs-component 或 element-ui 的 el-tabs 组件。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
    <el-tab-pane label="标签2" name="tab2">内容2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

动画效果

为页签切换添加过渡动画，可以使用 Vue 的 <transition> 或 <transition-group>。

<transition name="fade" mode="out-in">
  <component :is="currentTabComponent"></component>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

通过以上方法，可以灵活实现 Vue 中的页签切换功能，根据项目需求选择适合的方式。

vue实现页签切换