el-menu点击事件

### Element UI 中 `el-menu` 组件点击事件的使用

在 Element UI 的菜单组件 (`el-menu`) 中，可以通过监听特定的事件来处理用户的交互行为。对于点击事件而言，主要通过 `@select` 事件来进行绑定。

当用户点击某个菜单项时会触发此事件，并传递被点击项目的索引作为参数给回调函数。下面是一个具体的例子展示如何实现这一功能：

<template>
  <div>
    <!-- 菜单 -->
    <el-menu 
      :default-active="activeIndex"
      @select="handleSelect">
      <el-menu-item index="1">
        <i class="el-icon-document"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
    </el-menu>

    <!-- 显示当前选中的菜单项 -->
    <p>您选择了: {{ selectedMenu }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1', // 默认激活的第一个菜单项
      selectedMenu: ''  // 记录用户选择的菜单名称
    };
  },
  methods: {
    handleSelect(key) {
      this.selectedMenu = key === '1' ? '导航一' : (key === '2' ? '导航二' : '');
    }
  }
};
</script>

在这个实例里，每当有新的菜单项被点击时就会调用 `handleSelect()` 方法并更新页面上的提示信息[^1]。

为了确保刷新后仍能记住上次的选择，在实际项目开发过程中可以考虑结合 Vue Router 或者 Vuex 存储状态管理工具保存路径或索引值[^2]。