vue之Element-UI(Breadcrumb)动态面包屑效果

vue之Element-UI(Breadcrumb)动态面包屑效果

一、效果

二、面包屑作用

面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。

三、代码实现

代码如下（示例）：

通过面包屑带参数进行跨级跳转:

<template>
	<div>
		<div class="awardSearch_breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/awardSearch' }">质量推进活动奖项查询</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: `/yearAwardList/${query.awardTime}` }">{{ query.awardTime
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>获奖名单</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
	</div>
</template>

<script>
export default {
	data(){
		query:{
			awardTime: "", //奖项时间
		}
	}
}
</script>

<style lang="less" scoped>
  .awardSearch_breadcrumb {
      padding: 20px 0 24px 4px;
    }
</style>

---