帮我使用vue中的el-menu实现顶部导航栏功能的代码

好的，使用 `el-menu` 组件可以更方便地实现顶部导航栏的功能，下面是一个简单的 Vue 顶部导航栏页面的代码示例：

<template>
  <div class="nav-bar">
    <el-menu :default-active="activeIndex" mode="horizontal" background-color="#f8f8f8" text-color="#333" active-text-color="#409EFF" @select="handleSelect">
      <el-menu-item index="1">Home</el-menu-item>
      <el-menu-item index="2">About</el-menu-item>
      <el-menu-item index="3">Services</el-menu-item>
      <el-menu-item index="4">Contact</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      // 在这里可以处理导航菜单的点击事件，例如跳转到对应的页面
    }
  }
};
</script>

<style>
.nav-bar {
  padding: 10px;
}
</style>

在这个示例中，我们使用了 `el-menu` 组件来实现顶部导航栏的效果，并且设置了菜单项的链接和样式。通过设置 `default-active` 属性和 `handleSelect` 方法，我们可以控制当前选中的菜单项，并在菜单项被点击时触发相应的事件。您可以根据需要修改菜单项的数量和内容，以适应您的实际需求。