当前位置：首页 > 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实现增删改

Vue 实现增删改查功能 Vue.js 是一个流行的前端框架，用于构建用户界面。以下是使用 Vue.js 实现增删改查（CRUD）功能的方法。数据初始化在 Vue 实例的 data 中初始化一个…

vue实现上移下移插件

实现上移下移功能的 Vue 插件在 Vue 中实现列表项的上移和下移功能，可以通过自定义指令或组件封装的方式完成。以下是两种常见实现方式：基于数组操作的通用方法通过操作数组索引实现元素位置交换…

vue聊天实现

Vue 聊天应用实现步骤创建 Vue 项目使用 Vue CLI 或 Vite 初始化项目，安装必要依赖（如 Vue 3、Element UI 或 Vuetify 用于 UI 组件）。 npm c…

vue实现方法

Vue 实现方法 Vue 是一种流行的前端框架，用于构建用户界面和单页应用。以下是几种常见的 Vue 实现方法：创建 Vue 实例通过 new Vue() 创建一个 Vue 实例，传入配置对象，…

vue实现fadein

Vue 实现 FadeIn 效果在 Vue 中实现淡入（FadeIn）效果可以通过 CSS 过渡、动画或第三方库实现。以下是几种常见方法：使用 CSS 过渡通过 Vue 的过渡系统结合 CSS…

vue滚动实现

Vue 滚动实现方法使用原生滚动在 Vue 中可以通过 ref 获取 DOM 元素，调用原生滚动方法实现滚动效果。适用于简单场景。 <template> <div ref=…

vue实现底部菜单