帮我使用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-submenu index="about">
        <template slot="title">关于我们</template>
        <el-menu-item index="/about/company">公司简介</el-menu-item>
        <el-menu-item index="/about/culture">企业文化</el-menu-item>
      </el-submenu>
      <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`方法来实现页面的跳转。

在这个示例中，我们使用了`el-submenu`组件来实现二级菜单。通过设置`index`属性来实现菜单项的唯一标识，从而能够正确地跳转到对应的路由。

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