<template>
	<div class="Breadcrumb">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="display: flex;align-items: center;">
			<el-breadcrumb-item :to="{ path: '/home' }"><i class="el-icon-folder-opened" style="font-size: 18px;margin-right: 5px;"></i>首页</el-breadcrumb-item>
			<el-breadcrumb-item><i class="el-icon-folder-remove" style="font-size: 18px;margin-right: 5px;"></i>{{BreData1}}</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				BreData1: '',
			}
		},
		watch: {
			'$route': { // $route可以用引号，也可以不用引号
				handler(to) {
					this.BreData1 = to.meta.title
				},
				deep: true, // 深度监听
				immediate: true, // 第一次初始化渲染就可以监听到
			}
		},
	}
</script>

<style lang="scss">
	.Breadcrumb {
		padding: 20px;
		.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
		    font-weight: 700;
		    text-decoration: none;
		    transition: color .2s cubic-bezier(.645,.045,.355,1);
		    color: #fff;
		}
	}
</style>
