element ui和vue做一个导航界面

以下是一个使用Element UI和Vue.js创建导航界面的基本示例：

HTML:

<div id="app">
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template slot="title">Products</template>
      <el-menu-item index="2-1">Product 1</el-menu-item>
      <el-menu-item index="2-2">Product 2</el-menu-item>
      <el-menu-item index="2-3">Product 3</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">About</el-menu-item>
    <el-menu-item index="4">Contact</el-menu-item>
  </el-menu>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    activeIndex: '1'
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    }
  }
});

这个示例创建了一个水平的导航菜单，其中包含四个菜单项：Home、Products、About和Contact。Products菜单项是一个子菜单，包含三个子菜单项。当用户选择菜单项时，它会触发一个事件处理程序，将选定的菜单项的索引存储在Vue.js数据对象中，以便可以通过该数据对象轻松地跟踪用户选择的菜单项。