首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 NavMenu：
<template>
<div>
<h3>Element-React NavMenu 导航菜单</h3>
<el-menu default-active="home" class="el-menu-vertical-demo" @select="handleMenuSelect">
<el-menu-item index="home">首页</el-menu-item>
<el-submenu index="about">
<template slot="title">关于我们</template>
<el-menu-item index="history">历史</el-menu-item>
<el-menu-item index="team">团队</el-menu-item>
</el-submenu>
<el-menu-item index="contact">联系我们</el-menu-item>
</el-menu>
</div>
</template>
<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-react';
export default {
components: {
ElMenu,
ElMenuItem,
ElSubmenu,
},
methods: {
handleMenuSelect(index) {
// 处理菜单项点击事件，可以执行导航逻辑等
console.log(`选中菜单项：${index}`);
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElMenu、ElMenuItem 和 ElSubmenu 组件，并在模板中使用它们。通过设置 default-active 属性和监听 select 事件，可以控制当前选中的菜单项。
ElSubmenu 组件用于创建包含子菜单的菜单项。通过在 slot 中设置标题，可以在子菜单项的顶部显示一个标题。可以根据需要嵌套使用 ElSubmenu 来创建多层级的导航菜单。
请参考 Element-React 的官方文档：[Element-React NavMenu](https://element-plus.org/#/en-US/component/menu) 以获取更多详细信息和选项。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5627/Element-React