ElementUI 面包屑导航组件

官方地址

https://element.eleme.io/#/zh-CN/component/breadcrumb

基本使用

<el-breadcrumb></el-breadbcrumb>
<el-breadcrumb-item></el-breadcrumb-item>

  <el-breadcrumb separator="/">
	<el-breadcrumb-item :to="{path: '/'}" :replace="true">首页</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>
  <el-breadcrumb separator-clas="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>

Breadcrumb 属性

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

Breadcrumb-Item属性

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