当前位置：首页 > VUE

vue实现底部tab

2026-02-19 19:22:26VUE

实现底部Tab的基础结构

在Vue项目中，底部Tab通常由路由配置和组件组合实现。使用vue-router管理页面切换，结合vant或自定义组件完成UI布局。

安装必要依赖：

npm install vue-router vant

路由配置示例（router/index.js）：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/category',
    component: () => import('@/views/Category.vue')
  },
  {
    path: '/cart',
    component: () => import('@/views/Cart.vue')
  },
  {
    path: '/user',
    component: () => import('@/views/User.vue')
  }
]

使用Vant组件实现

Vant UI库提供现成的Tabbar组件，可快速实现底部导航：

<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

自定义Tab实现

如需完全自定义样式，可通过flex布局实现：

<template>
  <div class="tab-container">
    <router-link 
      v-for="(item, index) in tabs" 
      :key="index" 
      :to="item.path"
      class="tab-item"
      :class="{ active: $route.path === item.path }"
    >
      <span class="icon" :class="item.icon"></span>
      <span class="text">{{ item.text }}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/home', icon: 'icon-home', text: '首页' },
        { path: '/category', icon: 'icon-category', text: '分类' },
        { path: '/cart', icon: 'icon-cart', text: '购物车' },
        { path: '/user', icon: 'icon-user', text: '我的' }
      ]
    }
  }
}
</script>

<style scoped>
.tab-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
}
.active {
  color: #1989fa;
}
</style>

动态高亮处理

当需要根据路由变化自动高亮当前Tab时，可通过计算属性实现：

computed: {
  activeTab() {
    return this.tabs.findIndex(item => item.path === this.$route.path)
  }
}

添加过渡动画

为Tab切换添加平滑过渡效果：

vue实现底部tab

<transition name="fade">
  <router-view />
</transition>

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