035_Breadcrumb面包屑

最新推荐文章于 2023-11-19 16:21:36 发布

原创最新推荐文章于 2023-11-19 16:21:36 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了Element UI中的Breadcrumb面包屑组件，详细讲解了其基本用法和属性配置，包括分隔符设置和图标分隔符的使用。通过示例展示了如何创建并运行基于Element UI的面包屑导航项目，帮助开发者更好地理解和应用这一组件。

1. Breadcrumb面包屑

1.1. Breadcrumb面包屑显示当前页面的路径, 快速返回之前的任意页面。

1.2. Breadcrumb Attributes

参数	说明	类型	默认值
separator	分隔符	string	斜杠'/'
separator-class	图标分隔符class	string	无

1.3. Breadcrumb Item Attributes

参数	说明	类型	默认值
to	路由跳转对象, 同vue-router的to	string/object	无
replace	在使用to进行路由跳转时, 启用replace将不会向history添加新记录	boolean	false

2. Breadcrumb面包屑例子

2.1. 使用脚手架新建一个名为element-ui-breadcrumb的前端项目, 同时安装Element插件。

2.2. 在components下创建Breadcrumb.vue

<template>
  <div>
    <h1>基础用法-适用广泛的基础用法</h1>
    <h4>在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element提供了一个separator属性, 在el-breadcrumb标签中设置它来决定分隔符, 它只能是字符串, 默认为斜杠/。</h4>
    <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-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <h1>图标分隔符</h1>
    <h4>通过设置separator-class可使用相应的iconfont作为分隔符, 注意这将使separator设置失效。</h4>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

2.3. 运行项目, 访问http://localhost:8080/#/Breadcrumb