vue实现底部导航

Vue 实现底部导航的方法

使用 Vue Router 和自定义组件

在 Vue 项目中，可以通过 Vue Router 实现路由跳转，并结合自定义底部导航组件完成功能。创建一个名为 BottomNav.vue 的组件，定义导航结构和样式。

<template>
  <div class="bottom-nav">
    <router-link 
      v-for="item in navItems" 
      :key="item.path" 
      :to="item.path"
      class="nav-item"
    >
      <span>{{ item.name }}</span>
    </router-link>
  </div>
</template>

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

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

配置 Vue Router

在 router/index.js 中配置路由，确保路径与导航项的 path 一致。

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

const routes = [
  { path: '/home', component: Home },
  { path: '/category', component: Category },
  { path: '/cart', component: Cart },
  { path: '/profile', component: Profile },
  { path: '/', redirect: '/home' }
];

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

export default router;

在主布局中引入导航组件

在 App.vue 或主布局组件中引入 BottomNav，确保导航栏固定在页面底部。

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

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

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

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

优化导航交互效果

添加图标支持

通过引入图标库（如 Font Awesome 或自定义 SVG）增强视觉体验。

<template>
  <router-link :to="item.path" class="nav-item">
    <i :class="item.icon"></i>
    <span>{{ item.name }}</span>
  </router-link>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/home', name: '首页', icon: 'fas fa-home' },
        { path: '/category', name: '分类', icon: 'fas fa-list' },
        { path: '/cart', name: '购物车', icon: 'fas fa-shopping-cart' },
        { path: '/profile', name: '我的', icon: 'fas fa-user' }
      ]
    };
  }
};
</script>

动态高亮当前路由

利用 Vue Router 的 route 对象判断当前路径，动态添加高亮类名。

<template>
  <router-link 
    :to="item.path" 
    class="nav-item"
    :class="{ 'active': $route.path === item.path }"
  >
    <!-- 内容 -->
  </router-link>
</template>

<style>
.active {
  color: #42b983 !important;
}
</style>

移动端适配注意事项

避免点击区域过小

通过调整 padding 和 min-width 确保导航项易于点击。

.nav-item {
  padding: 12px 20px;
  min-width: 25%;
  text-align: center;
}

处理 iOS 底部安全区域

使用 env(safe-area-inset-bottom) 适配 iPhone 等设备的底部安全区域。

.bottom-nav {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}