当前位置：首页 > VUE

vue实现底部菜单

2026-02-18 08:57:27VUE

vue实现底部菜单的方法

使用Vue Router和vant组件库

安装vant组件库后，可以通过Tabbar组件快速实现底部菜单导航。在Vue文件中引入Tabbar和TabbarItem组件，结合Vue Router的router-link实现页面切换。

vue实现底部菜单

<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/friend">好友</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/setting">设置</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
    }
  }
}
</script>

自定义底部菜单组件

创建独立的BottomNav组件，通过flex布局实现底部固定定位。使用Vue Router的$route对象动态设置active状态。

vue实现底部菜单

<template>
  <div class="bottom-nav">
    <router-link 
      v-for="(item, index) in navItems"
      :key="index"
      :to="item.path"
      :class="{active: $route.path === item.path}">
      <span>{{item.title}}</span>
    </router-link>
  </div>
</template>

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

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #fff;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 8px 0;
}
.bottom-nav .active {
  color: #ff6700;
}
</style>

使用Element UI实现

Element UI的el-menu组件配合mode="horizontal"属性可以实现底部导航效果。需要设置position: fixed固定在底部。

<template>
  <el-menu 
    mode="horizontal"
    class="bottom-menu"
    :default-active="$route.path"
    router>
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/product">产品</el-menu-item>
    <el-menu-item index="/service">服务</el-menu-item>
    <el-menu-item index="/contact">联系我们</el-menu-item>
  </el-menu>
</template>

<style>
.bottom-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>

移动端适配方案

对于移动端项目，需要考虑安全区域和手势操作。可以通过CSS的env()函数处理iPhoneX等设备的底部安全区域。

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

每种实现方式各有特点，vant方案适合移动端轻量级应用，自定义组件灵活性最高，Element UI适合中后台管理系统。根据项目需求选择合适的实现方案。

标签: 菜单 vue

分享给朋友：

vue tag实现

Vue 标签实现方法在 Vue 中实现标签功能可以通过多种方式完成，常见场景包括动态标签生成、标签输入框、标签管理等。以下是几种典型实现方案：动态标签列表渲染使用 v-for 指令渲染标签数组…

vue 实现循环

Vue 实现循环的方法在 Vue 中，可以使用 v-for 指令来实现循环渲染列表数据。以下是几种常见的循环实现方式：基本数组循环 <template> <ul>…

vue实现单词逆转

实现单词逆转的方法在Vue中实现单词逆转可以通过多种方式完成，以下是几种常见的方法：使用计算属性逆转单词计算属性是Vue中处理数据逻辑的理想选择。可以通过计算属性来实现单词逆转： <t…

vue实现点击跳转

Vue 实现点击跳转的方法在 Vue 中实现点击跳转可以通过以下几种方式：使用 router-link router-link 是 Vue Router 提供的组件，用于声明式导航。适合在模板中…

vue实现语音播报

实现语音播报的基本方法在Vue中实现语音播报功能，可以通过Web Speech API中的SpeechSynthesis接口来完成。该接口允许开发者将文本转换为语音并播放。使用SpeechSyn…

vue实现理财超市

Vue实现理财超市功能理财超市通常包含产品展示、筛选、排序、详情页等功能，以下是基于Vue的实现方案：技术栈建议 Vue 2/3 + Vue Router UI库：Element UI/Ant…

vue实现底部菜单