vue3 element plus menu 顶部栏菜单

Vue3 Element Plus 的 Menu 组件是一个用于创建导航栏的工具，它属于 Element Plus UI 库的一部分，提供了一个灵活的方式来组织和管理页面的侧边栏或顶部导航。在 Element Plus 中，`<el-menu>`组件通常用于构建响应式的、可折叠的菜单系统，支持多种展示模式，如横向导航、纵向导航等。

以下是 `el-menu` 的基本用法：

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item index="1">导航一</el-menu-item>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-submenu index="3">
      <template slot="title">导航三</template>
      <el-menu-item index="3-1">子导航一</el-menu-item>
      <el-menu-item index="3-2">子导航二</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem } from "element-plus";
export default {
  components: {
    ElMenu,
    ElMenuItem
  }
};
</script>

关键参数和选项包括：

- `default-active`：默认选中的菜单项，可以根据路由自动设置（例如：`$route.path`）。
- `router`：标志是否使用 Vue Router，启用后会监听路由变化，相应地更新菜单状态。
- `index`：菜单项的唯一标识符，如果是子菜单，可以是父菜单项的索引加上“-”和子项的索引。
- `slot`：在 `<el-submenu>`中，`title` slot 可以定义子菜单的标题。