Vue element-plus 导航栏 [el-menu]

在Vue中使用element-plus创建一个简单的导航栏可以通过<el-menu>组件实现。以下是一个基本的例子：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-menu-item index="2">订单管理</el-menu-item>
    <el-menu-item index="3">配置中心</el-menu-item>
    <el-menu-item index="4">日志管理</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中的菜单项：', key, keyPath);
    },
  },
};
</script>

在这个例子中，我们创建了一个水平模式的导航栏，其中包含了四个菜单项。:default-active绑定用于设置默认激活的菜单项，@select用于监听菜单项的点击事件。当用户点击一个菜单项时，handleSelect方法会被调用，并输出被点击的菜单项的键和路径。