ElementUI 导航栏 使用教程 示例

### ElementUI 导航栏使用教程

#### 创建基础导航菜单
为了创建一个简单的导航栏，可以利用 `el-menu` 组件来实现。此组件支持水平和垂直布局模式。

<template>
  <div>
    <!-- 使用 el-menu 来定义导航栏 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
};
</script>

上述代码展示了如何构建一个带有子项的顶部导航条[^1]。

#### 添加下拉菜单功能
通过引入 `el-submenu` 和 `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>

这段代码片段说明了怎样向导航栏加入多级菜单结构。

#### 设置默认激活状态
可以通过设置 `default-active` 属性指定当前选中的菜单项：

data() {
  return {
    // 默认激活第一个tab
    activeIndex: '1'
  }
}

这使得页面加载时某个特定项目处于高亮显示状态。