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

最新推荐文章于 2024-05-04 18:47:36 发布

橙子超sweet

最新推荐文章于 2024-05-04 18:47:36 发布

阅读量859

点赞数 1

文章标签： elementui vue 前端 javascript

本文链接：https://blog.csdn.net/2401_83036723/article/details/136258006

版权

本文介绍了如何在Vue项目中使用Element-UI库实现动态面包屑功能，包括面包屑的作用、代码示例以及如何通过带参数的路径进行跨级跳转。

摘要由CSDN通过智能技术生成

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>