当前位置：首页 > VUE

vue实现页面tab

2026-02-17 03:45:20VUE

Vue 实现页面 Tab 的方法

使用动态组件 `<component :is>`

通过 Vue 的 is 特性动态切换组件，结合 v-for 渲染标签页标题，利用 currentTab 控制当前显示内容。

vue实现页面tab

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <component :is="currentTab" class="tab-content"></component>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab1', label: '标签页1' },
        { name: 'Tab2', label: '标签页2' }
      ]
    };
  }
};
</script>

<style>
.tabs button.active {
  border-bottom: 2px solid #42b983;
}
.tab-content {
  padding: 20px;
}
</style>

使用路由嵌套实现 Tab

通过 Vue Router 的嵌套路由和 <router-view> 实现标签页，适合需要 URL 同步的场景。

vue实现页面tab

// router.js
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  }
];

<!-- Layout.vue -->
<template>
  <div>
    <router-link to="/tab1">标签页1</router-link>
    <router-link to="/tab2">标签页2</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方库

若需复杂功能（如拖拽排序、动画），可集成如 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>

状态管理优化

当 Tab 内容需跨组件共享状态时，可通过 Vuex 管理当前激活的标签页：

// store.js
export default new Vuex.Store({
  state: { currentTab: 'Tab1' },
  mutations: {
    setTab(state, tabName) {
      state.currentTab = tabName;
    }
  }
});

<button @click="$store.commit('setTab', 'Tab1')">切换到Tab1</button>

标签: 页面 vue

分享给朋友：

vue实现点击样式

Vue 实现点击样式的方法在 Vue 中实现点击样式可以通过多种方式完成，以下是几种常见的方法：方法一：使用 v-bind:class 动态绑定类名通过数据驱动的方式动态切换类名，结合 CS…

vue插件实现

Vue 插件实现方法 Vue 插件是一种向 Vue 应用程序添加全局功能的机制。插件可以包含全局指令、过滤器、混入、实例方法等。插件的基本结构一个 Vue 插件通常是一个对象或函数，需要暴露一个…

vue diff实现

Vue Diff 算法实现原理 Vue 的虚拟 DOM Diff 算法（即 patch 过程）是其高效渲染的核心，主要通过对比新旧虚拟节点的差异，最小化 DOM 操作。以下是关键实现要点：同层级比…

vue底层实现

Vue.js 的底层实现原理 Vue.js 是一个渐进式 JavaScript 框架，其核心实现主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是其关键实现细节：响应式系统 Vue 2…

vue实现爬虫

Vue 实现爬虫的基本思路 Vue.js 本身是一个前端框架，主要用于构建用户界面。要实现爬虫功能，通常需要结合后端技术或浏览器自动化工具。以下是几种常见的方法：方法一：Vue + Node.js…

proxy实现vue

使用 Proxy 实现 Vue 响应式系统 Vue 3 的响应式系统基于 JavaScript 的 Proxy API，通过代理对象实现对属性的拦截和依赖追踪。以下是实现的核心逻辑：创建响应式对象…

vue实现页面tab