当前位置：首页 > 前端教程

elementui nav

2026-03-06 00:07:58前端教程

ElementUI Nav 导航组件使用指南

ElementUI 提供了多种导航组件，包括菜单、导航栏、面包屑等。以下是对这些组件的详细介绍和使用方法。

侧边栏导航（Menu）

侧边栏导航通常用于后台管理系统，通过 el-menu 组件实现。基本结构包含 el-menu、el-submenu 和 el-menu-item。

<el-menu
  default-active="1"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span>导航二</span>
  </el-menu-item>
</el-menu>

顶部导航栏（NavMenu）

水平顶部导航栏使用 el-menu 并设置 mode="horizontal" 属性。

<el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect">
  <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">订单管理</el-menu-item>
</el-menu>

面包屑导航（Breadcrumb）

面包屑导航用于显示当前页面在系统层级结构中的位置。

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
</el-breadcrumb>

步骤条（Steps）

步骤条用于引导用户完成任务的流程导航。

<el-steps :active="active" finish-status="success">
  <el-step title="步骤1"></el-step>
  <el-step title="步骤2"></el-step>
  <el-step title="步骤3"></el-step>
</el-steps>

分页（Pagination）

分页组件用于数据量较大时的内容导航。

<el-pagination
  layout="prev, pager, next"
  :total="50">
</el-pagination>

标签页（Tabs）

标签页组件用于内容分类导航。

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>