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

elementui导航

2026-03-06 02:21:03前端教程

ElementUI 导航组件使用指南

ElementUI 提供了多种导航组件，包括菜单、面包屑、分页等，适用于不同的导航需求。以下是常用导航组件的使用方法和示例。

菜单导航 (Menu)

ElementUI 的菜单组件支持水平、垂直模式，以及多级菜单嵌套。

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template #title>产品</template>
    <el-menu-item index="2-1">产品列表</el-menu-item>
    <el-menu-item index="2-2">产品详情</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">关于我们</el-menu-item>
</el-menu>

default-active 设置默认激活的菜单项。
mode 可设置为 horizontal 或 vertical。
@select 事件在菜单项被选中时触发。

面包屑导航 (Breadcrumb)

面包屑导航显示当前页面的路径，方便用户快速返回上一级。

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/products' }">产品</el-breadcrumb-item>
  <el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>

separator 设置分隔符。
:to 属性支持路由跳转。

分页导航 (Pagination)

分页组件适用于数据量较大的列表展示。

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  layout="prev, pager, next"
  @current-change="handleCurrentChange"
></el-pagination>

current-page 当前页码。
page-size 每页显示条目数。
total 总条目数。
layout 设置分页布局。
@current-change 页码变化时触发的事件。

标签页导航 (Tabs)

标签页组件用于管理多个内容视图的切换。

<el-tabs v-model="activeTab" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="user">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="config">配置管理内容</el-tab-pane>
</el-tabs>

v-model 绑定当前激活的标签页名称。
label 设置标签页标题。
name 标签页的唯一标识符。

步骤条导航 (Steps)

步骤条组件用于引导用户完成多步骤操作。

<el-steps :active="activeStep" finish-status="success">
  <el-step title="步骤1" description="描述信息"></el-step>
  <el-step title="步骤2" description="描述信息"></el-step>
  <el-step title="步骤3" description="描述信息"></el-step>
</el-steps>