<template>
  <el-menu
    :default-active="activeMenuItem"
    mode="horizontal"
    @select="handleMenuSelect"
  >
    <el-menu-item index="home">Home</el-menu-item>
    <el-menu-item index="about">About</el-menu-item>
    <el-submenu index="services">
      <template #title>Services</template>
      <el-menu-item index="service1">Service 1</el-menu-item>
      <el-menu-item index="service2">Service 2</el-menu-item>
    </el-submenu>
    <el-menu-item index="contact">Contact</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItem: 'home'
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenuItem = index;
      // 处理导航菜单的点击事件
    }
  }
};
</script>