当前位置：首页 > VUE

vue横导航栏实现

2026-01-21 16:17:02VUE

Vue 横向导航栏实现方法

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

通过 Vue 的 v-for 指令可以动态渲染导航菜单项，数据通常存储在组件的 data 属性中：

<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: '/about' }
      ]
    }
  }
}
</script>

<style scoped>
.horizontal-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
}
.horizontal-nav li {
  margin-right: 20px;
}
.horizontal-nav a {
  text-decoration: none;
  color: #333;
}
</style>

响应式设计实现

添加媒体查询使导航栏在不同屏幕尺寸下自适应：

@media (max-width: 768px) {
  .horizontal-nav ul {
    flex-direction: column;
  }
  .horizontal-nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

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

添加交互效果

通过 Vue 的 @mouseenter 和 @mouseleave 实现悬停效果：

<li 
  v-for="item in navItems" 
  :key="item.id"
  @mouseenter="hoverItem = item.id"
  @mouseleave="hoverItem = null"
>
  <a 
    :href="item.link" 
    :class="{ 'hover-effect': hoverItem === item.id }"
  >
    {{ item.text }}
  </a>
</li>

使用 UI 框架快速实现

如使用 Element UI 可以快速构建：

<el-menu mode="horizontal">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template #title>产品</template>
    <el-menu-item index="2-1">产品列表</el-menu-item>
  </el-submenu>
</el-menu>

每种方法适用于不同场景，基础实现适合轻量级应用，UI 框架方案适合需要快速开发的中大型项目。

vue横导航栏实现