当前位置：首页 > VUE

vue 底部菜单实现

2026-03-08 22:15:50VUE

使用 Vue Router 实现底部菜单

在 Vue 项目中，可以通过 vue-router 结合自定义组件实现底部菜单导航。

1. 安装 Vue Router
确保项目中已安装 vue-router，未安装时运行：

npm install vue-router

2. 定义路由配置
在 router/index.js 中配置路由，示例：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
import Settings from '../views/Settings.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/profile', name: 'Profile', component: Profile },
  { path: '/settings', name: 'Settings', component: Settings }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 创建底部菜单组件
新建 components/BottomNav.vue，使用 router-link 实现导航：

<template>
  <div class="bottom-nav">
    <router-link to="/" class="nav-item">首页</router-link>
    <router-link to="/profile" class="nav-item">个人中心</router-link>
    <router-link to="/settings" class="nav-item">设置</router-link>
  </div>
</template>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #f5f5f5;
  padding: 10px 0;
}
.nav-item {
  text-decoration: none;
  color: #333;
}
.router-link-active {
  color: #42b983;
  font-weight: bold;
}
</style>

4. 在 App.vue 中引入
确保菜单固定在页面底部，并预留内容区域：

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

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

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

<style>
.app {
  padding-bottom: 60px; /* 避免内容被底部菜单遮挡 */
}
</style>

使用 UI 库快速实现（如 Vant）

若使用 Vant 等 UI 库，可直接调用现成的导航组件：

1. 安装 Vant

npm install vant

2. 使用 Tabbar 组件
示例代码：

vue 底部菜单实现

<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/profile">个人中心</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/settings">设置</van-tabbar-item>
  </van-tabbar>
</template>

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

export default {
  components: { VanTabbar: Tabbar, VanTabbarItem: TabbarItem },
  setup() {
    const active = ref(0)
    return { active }
  }
}
</script>