当前位置：首页 > VUE

vue实现水平导航栏

2026-01-21 01:06:17VUE

Vue实现水平导航栏的方法

使用v-for指令动态生成导航项

在Vue中可以通过数据驱动的方式动态生成导航栏，利用v-for指令遍历数组数据：

<template>
  <nav class="horizontal-nav">
    <ul>
      <li v-for="item in navItems" :key="item.id">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { id: 1, text: '首页', link: '/' },
        { id: 2, text: '产品', link: '/products' },
        { id: 3, text: '服务', link: '/services' },
        { id: 4, text: '关于', link: '/about' }
      ]
    }
  }
}
</script>

<style scoped>
.horizontal-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.horizontal-nav li {
  margin-right: 20px;
}

.horizontal-nav a {
  text-decoration: none;
  color: #333;
}
</style>

添加响应式交互效果

为导航项添加悬停效果和激活状态可以提升用户体验：

.horizontal-nav a:hover {
  color: #42b983;
}

.horizontal-nav a.active {
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}

在Vue组件中可以通过计算属性或方法判断当前激活项：

methods: {
  isActive(link) {
    return this.$route.path === link;
  }
}

模板中使用该方法绑定class：

<a :href="item.link" :class="{ active: isActive(item.link) }">{{ item.text }}</a>

使用Vue Router实现路由导航

当配合Vue Router使用时，可以用router-link替代常规a标签：

<router-link 
  v-for="item in navItems" 
  :key="item.id"
  :to="item.link"
  active-class="active"
>
  {{ item.text }}
</router-link>

移动端适配方案

对于移动设备，可以通过媒体查询调整导航栏布局：

@media (max-width: 768px) {
  .horizontal-nav ul {
    flex-direction: column;
  }

  .horizontal-nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}