面包屑导航

需求：放上去出來"小手"可进行点击跳转到对应页面

<template>
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item v-show="index != 0" v-for="(item, index) in breadList" :key="index">
    <span @click="jump(item)">{{ item.meta.title }}</span>
  </el-breadcrumb-item>
 </el-breadcrumb>
</template>
<script>
export default {
data() {
  return {
    breadList: [],
  };
},
created() {
  this.getBreadList();
},
watch: {
  $route: 'getBreadList',
},
methods: {
  getBreadList() {
    this.breadList = this.$route.matched;
  },
  // 跳转
  jump(item) {
    this.$router.push({ path: item.path });
  },
},
};
</script>
<style scoped>
.el-breadcrumb {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
font-size: 16px;
font-weight: bold;
height: 50px;
line-height: 50px;
padding-left: 15px;
background-color: #fff;
margin-bottom: 20px;
cursor: pointer;
}
</style>