vue横导航栏实现

Vue 横向导航栏实现方法

使用 <ul> 和 <li> 基础结构

在 Vue 模板中通过 HTML 列表结构实现横向布局，结合 CSS 的 display: flex 属性：

<template>
  <nav class="horizontal-nav">
    <ul>
      <li v-for="item in navItems" :key="item.id">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.horizontal-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 20px; /* 项目间距 */
}
.horizontal-nav li a {
  text-decoration: none;
  color: #333;
}
</style>

基于 Vue Router 的动态路由绑定

当需要与路由结合时，使用 router-link 组件并动态绑定路由数据：

<script>
export default {
  data() {
    return {
      navItems: [
        { id: 1, name: '首页', path: '/' },
        { id: 2, name: '产品', path: '/products' },
        { id: 3, name: '关于', path: '/about' }
      ]
    }
  }
}
</script>

响应式设计处理

通过媒体查询调整小屏幕下的导航样式：

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

使用 UI 框架（如 Element UI）

若使用 UI 框架可快速实现专业效果：

<template>
  <el-menu mode="horizontal" :default-active="activeIndex">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

添加交互效果

通过 Vue 的类绑定实现悬停或激活状态：

<li v-for="item in navItems" 
    :class="{ 'active': currentRoute === item.path }"
    @mouseenter="handleHover(item)">
</li>

methods: {
  handleHover(item) {
    // 处理悬停逻辑
  }
}