vue实现顶部菜单

使用 Vue 实现顶部菜单

在 Vue 中实现顶部菜单可以通过多种方式完成，以下是几种常见的方法。

使用 Vue Router 实现导航菜单

通过 Vue Router 可以轻松实现顶部菜单的导航功能。以下是一个简单的示例代码：

<template>
  <div class="menu">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </div>
</template>

<script>
export default {
  name: 'TopMenu'
}
</script>

<style scoped>
.menu {
  background-color: #333;
  padding: 10px;
}
.menu a {
  color: white;
  margin-right: 15px;
  text-decoration: none;
}
.menu a:hover {
  text-decoration: underline;
}
</style>

使用动态菜单数据

如果需要动态生成菜单项，可以通过数据驱动的方式实现：

<template>
  <div class="menu">
    <router-link 
      v-for="item in menuItems" 
      :key="item.path" 
      :to="item.path"
    >
      {{ item.title }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/home', title: '首页' },
        { path: '/about', title: '关于' },
        { path: '/contact', title: '联系我们' }
      ]
    }
  }
}
</script>

使用 UI 框架快速实现

如果项目中使用 UI 框架如 Element UI 或 Ant Design Vue，可以更快速地实现顶部菜单：

<template>
  <el-menu mode="horizontal" background-color="#545c64" text-color="#fff">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui'

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>

响应式菜单实现

对于移动端适配，可以实现响应式菜单：

<template>
  <div class="menu-container">
    <div class="menu-toggle" @click="toggleMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="menu" :class="{ 'active': isMenuOpen }">
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/contact">联系我们</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style scoped>
.menu-container {
  position: relative;
}
.menu-toggle {
  display: none;
  cursor: pointer;
}
.menu {
  display: flex;
}
.menu a {
  margin-right: 20px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    width: 100%;
    background: #333;
  }
  .menu.active {
    display: flex;
  }
  .menu a {
    margin: 10px 0;
  }
}
</style>

添加菜单激活状态

可以通过 Vue Router 的 router-link-active 类为当前活动菜单项添加样式：

.router-link-active {
  font-weight: bold;
  color: #42b983 !important;
}

以上方法可以根据项目需求进行组合或调整，实现功能完善且美观的顶部菜单。