帮我使用vue中的el-menu实现顶部导航栏功能并实现点击切换不同的内容的代码

好的，以下是一个简单的示例代码，使用了Vue.js和Element UI库：

<template>
  <div>
    <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    }
  }
}
</script>

在这个示例中，我们使用了Vue.js的路由功能来实现切换不同内容的效果，路由视图通过`<router-view>`标签进行渲染。

`el-menu`组件是Element UI库中的一个顶部导航栏组件，我们可以通过`default-active`属性来设置默认选中的菜单项。`mode`属性设置为`horizontal`表示水平布局，`@select`事件监听用户点击菜单项的事件，并通过`handleSelect`方法来实现页面的跳转。

在实际使用中，我们需要根据自己的具体需求来调整代码实现细节。