elementplus下拉菜单跳转

Element Plus 是 Vue 3 的 UI 框架，它提供了一个简洁易用的下拉菜单组件 `el-menu`。当你需要通过下拉菜单的选项进行页面跳转时，可以按照以下步骤操作：

1. **安装 Element Plus**：首先确保已经安装了 Vue 和 Element Plus，如果还没有，可以在项目中运行 `npm install vue-element-plus` 或者 `yarn add vue-element-plus`。

2. **引入组件**：在你的组件模板文件中引入 `<el-menu>` 组件：

   <template>
     <el-menu :default-active="currentIndex" @select="handleSelect">
       <!-- 下拉菜单项 -->
     </el-menu>
   </template>

3. **设置选项和事件处理**：
- 创建下拉菜单的选项，每个选项可以包含一个链接（`<a>`标签），并附带路由路径，如：

     <el-menu-item index="/path/to/page1">
       <a>Page 1</a>
     </el-menu-item>

- 定义事件处理器 `handleSelect` 来处理用户点击事件，这将根据选中的菜单项的 `index` 属性触发路由跳转：

     <script>
     export default {
       data() {
         return {
           currentIndex: '', // 初始选中的菜单索引
         };
       },
       methods: {
         handleSelect(index) {
           this.$router.push({ path: index });
         },
       },
     }
     </script>

4. **配置路由**：
确保已经设置了合适的路由，以便当 `this.$router.push` 被调用时能够导航到正确的页面。