当前位置：首页 > VUE

vue底部导航简单实现

2026-01-21 10:38:32VUE

使用 Vue Router 实现底部导航

在 Vue 项目中，可以通过 Vue Router 和自定义组件实现底部导航。以下是一个简单的实现示例：

安装 Vue Router（如果尚未安装）：
```
npm install vue-router
```

创建路由配置文件（如 router/index.js）：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/contact', name: 'Contact', component: Contact }
]

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

export default router

创建底部导航组件

在 components 目录下创建 BottomNav.vue 组件：

vue底部导航简单实现

<template>
  <div class="bottom-nav">
    <router-link to="/" class="nav-item">
      <span>首页</span>
    </router-link>
    <router-link to="/about" class="nav-item">
      <span>关于</span>
    </router-link>
    <router-link to="/contact" class="nav-item">
      <span>联系</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'BottomNav'
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
  padding: 10px 0;
  border-top: 1px solid #e7e7e7;
}

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

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

在主应用中使用导航组件

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

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

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

export default {
  name: 'App',
  components: {
    BottomNav
  }
}
</script>

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

添加图标增强体验

可以使用图标库（如 Font Awesome）来增强导航视觉效果：

vue底部导航简单实现

安装 Font Awesome：

npm install @fortawesome/fontawesome-free

修改 BottomNav.vue：


<template>
<div class="bottom-nav">
 <router-link to="/" class="nav-item">
   <i class="fas fa-home"></i>
   <span>首页</span>
 </router-link>
 <router-link to="/about" class="nav-item">
   <i class="fas fa-info-circle"></i>
   <span>关于</span>
 </router-link>
 <router-link to="/contact" class="nav-item">
   <i class="fas fa-envelope"></i>
   <span>联系</span>
 </router-link>
</div>
</template>

/* 添加图标样式 */ i { font-size: 20px; margin-bottom: 4px; } ```

使用 Vue 状态管理导航激活样式

可以通过计算属性动态设置激活样式：

<script>
export default {
  name: 'BottomNav',
  computed: {
    activeRoute() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

这种实现方式简单直接，适合大多数移动端和需要固定底部导航的 Vue 应用场景。可以根据项目需求调整样式和功能。