vue底部导航简单实现

使用 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 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;

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

   

   <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>

4. 在主页面中引入导航组件 在 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 的示例：

1. 安装 Vant

   

   npm install vant

2. 引入 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);

3. 使用 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;
  }
);

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