当前位置：首页 > VUE

vue实现底部导航

2026-01-16 01:53:30VUE

Vue 实现底部导航的方法

使用 Vue Router 和自定义组件

在 Vue 项目中，可以通过结合 Vue Router 和自定义组件实现底部导航。创建一个独立的导航组件，并在主布局中引入。

导航组件示例（BottomNav.vue）：

<template>
  <div class="bottom-nav">
    <router-link to="/home" class="nav-item">
      <i class="icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link to="/explore" class="nav-item">
      <i class="icon-explore"></i>
      <span>发现</span>
    </router-link>
    <router-link to="/profile" class="nav-item">
      <i class="icon-profile"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 8px 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
}
.router-link-active {
  color: #42b983; /* Vue 主题色 */
}
</style>

动态高亮当前路由

通过 Vue Router 的 $route 对象动态判断当前路由，添加高亮样式：

<template>
  <div class="bottom-nav">
    <router-link 
      v-for="item in navItems" 
      :key="item.path" 
      :to="item.path"
      :class="['nav-item', { 'active': $route.path === item.path }]">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/home', icon: 'icon-home', title: '首页' },
        { path: '/explore', icon: 'icon-explore', title: '发现' },
        { path: '/profile', icon: 'icon-profile', title: '我的' }
      ]
    }
  }
}
</script>

移动端适配优化

针对移动端，可以添加以下优化：

使用 viewport 单位确保布局缩放正常
增加点击区域大小
添加过渡动画

CSS 优化示例：

.bottom-nav {
  height: 50px; /* 标准移动端导航高度 */
}
.nav-item {
  min-width: 25vw; /* 扩大点击区域 */
  transition: color 0.3s;
}
.nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

使用 UI 库快速实现

如需快速开发，可借助现成的 UI 库：

Vant：

npm install vant

示例代码：


<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="user-o">我的</van-tabbar-item>
</van-tabbar>
</template>

import { Tabbar, TabbarItem } from 'vant'; export default { components: { VanTabbar: Tabbar, VanTabbarItem: TabbarItem }, data() { return { active: 0 } } } ```

Mint UI：

npm install mint-ui

示例代码：

vue实现底部导航

<template>
<mt-tabbar v-model="selected" fixed>
 <mt-tab-item id="home">
   <img slot="icon" src="./assets/home.png">
   首页
 </mt-tab-item>
 <mt-tab-item id="explore">
   <img slot="icon" src="./assets/explore.png">
   发现
 </mt-tab-item>
</mt-tabbar>
</template>