vue3elememtplus导航栏

Vue3 Element Plus 导航栏（Navmenu）是基于Element Plus库构建的一个轻量级、易用的导航组件。Element Plus是Element UI的下一代版本，它保持了简洁的设计风格，并引入了更多的Vue3特性和优化。

`<el-menu>`是Element Plus提供的核心导航组件，可以用于创建响应式的网站或应用菜单。它的基本结构通常包含以下几个部分：

1. **标签** (Tag)：定义菜单项的基本标签，如`<el-menu-item>`。
2. **路径** (Path)：每个菜单项对应的一个URL路径，例如`<router-link>...</router-link>`。
3. **子菜单** (Submenu)：通过`<sub-menu>`标签嵌套其他菜单。
4. **激活状态** (Active)：默认高亮显示当前访问的页面对应的菜单项。
5. **属性** (Attributes)：如`index`设置默认选中项，`default-active-key`控制初始激活项等。

使用Element Plus导航栏的步骤大致如下：

<template>
  <el-menu :default-active="$route.path" class="navmenu">
    <el-menu-item index="1">
      <router-link to="/">首页</router-link>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">功能列表</template>
      <el-menu-item index="2-1">功能一</el-menu-item>
      <el-menu-item index="2-2">功能二</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

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

<style scoped>
.navmenu {
  /* 自定义样式 */
}
</style>