当前位置：首页 > VUE

vue底部导航简单实现

2026-02-22 02:06:13VUE

使用 Vue Router 实现底部导航

在 Vue 项目中，可以通过 Vue Router 结合自定义组件实现底部导航功能。以下是一个简单的实现步骤：

安装 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: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

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

export default router;

创建底部导航组件 在 components/NavBar.vue 中定义导航栏，使用 <router-link> 实现路由跳转：

vue底部导航简单实现

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

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

在主页面中引入导航组件 在 App.vue 中引入导航组件，并确保路由视图 <router-view> 有足够的底部间距：

<template>
  <router-view />
  <NavBar />
</template>

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

export default {
  components: { NavBar },
};
</script>

<style>
body {
  margin-bottom: 60px; /* 避免内容被导航栏遮挡 */
}
</style>

使用第三方 UI 库快速实现

若希望快速实现，可以借助第三方 UI 库（如 Vant、Element UI 等）。以下是基于 Vant 的示例：

安装 Vant
```
npm install vant
```

引入 Tabbar 组件 在 main.js 中全局引入 Vant 的 Tabbar：

import { createApp } from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Tabbar).use(TabbarItem);

使用 Tabbar 组件 修改 NavBar.vue，直接使用 Vant 的 Tabbar：

<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/about" icon="user-o">关于</van-tabbar-item>
    <van-tabbar-item to="/contact" icon="chat-o">联系</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return { active: 0 };
  },
};
</script>

动态高亮当前路由

通过监听路由变化动态更新导航高亮状态：

// 在 NavBar.vue 的 script 中
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const active = ref(0);

watch(
  () => route.path,
  (path) => {
    if (path === '/') active.value = 0;
    else if (path === '/about') active.value = 1;
    else if (path === '/contact') active.value = 2;
  }
);

以上方法可根据实际需求调整样式或功能，如添加图标、动画效果等。