当前位置：首页 > VUE

vue 实现底部导航

2026-03-29 15:56:40VUE

使用 Vue Router 实现底部导航

在 Vue 项目中，可以通过 Vue Router 结合自定义组件实现底部导航功能。以下是一个完整的实现步骤：

创建底部导航组件（如 BottomNav.vue）

<template>
  <div class="bottom-nav">
    <router-link 
      v-for="item in navItems" 
      :key="item.path" 
      :to="item.path"
      class="nav-item"
      active-class="active"
    >
      <span class="icon">{{ item.icon }}</span>
      <span class="text">{{ item.text }}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/home', icon: '🏠', text: '首页' },
        { path: '/discover', icon: '🔍', text: '发现' },
        { path: '/cart', icon: '🛒', text: '购物车' },
        { path: '/profile', icon: '👤', text: '我的' }
      ]
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  background: #fff;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
  text-decoration: none;
}

.active {
  color: #42b983;
}
</style>

配置路由

在 router/index.js 中配置对应路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/discover',
      component: () => import('@/views/Discover.vue')
    },
    {
      path: '/cart',
      component: () => import('@/views/Cart.vue')
    },
    {
      path: '/profile',
      component: () => import('@/views/Profile.vue')
    },
    {
      path: '/',
      redirect: '/home'
    }
  ]
})

在主布局中使用导航组件

在 App.vue 中引入并使用导航组件

<template>
  <div id="app">
    <router-view/>
    <BottomNav/>
  </div>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'

export default {
  components: {
    BottomNav
  }
}
</script>

<style>
#app {
  padding-bottom: 50px; /* 为底部导航留出空间 */
}
</style>

使用第三方 UI 库实现

如果使用 Vant 等 UI 库，可以更快速实现：

安装 Vant

npm install vant -S

使用 Vant 的 Tabbar 组件

vue 实现底部导航

<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">发现</van-tabbar-item>
    <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0
    }
  },
  watch: {
    active(val) {
      const routes = ['/home', '/discover', '/cart', '/profile']
      this.$router.push(routes[val])
    }
  }
}
</script>