breadcrumb.vue

<template>
<div class="breadcrumb-wrapper">
    <i class="icon-loc"></i>
    <span class="breadcrumb__item active" @click="goIndex">
        <span>首页</span>
        <i class="el-icon-arrow-right"></i>
    </span>
    <span class="breadcrumb__item">
        <span>{{currentPageName}}</span>
    </span>    
</div>
</template>
<script>
export default {
    data(){
        return{
            currentPageName:''
        }
    },
    mounted(){
        this.currentPageName = this.$route.meta.title
    },
    methods:{
        goIndex(){
            this.$router.push('/index')
        }
    },
    watch:{
        $route() {
          this.currentPageName = this.$route.meta.title
          console.log(this.$route)
      }
    }
}
</script>

<style lang="less" scoped>
.breadcrumb-wrapper{
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding-left: 20px;
    background-color:@party-white;
    .icon-loc{
        display: inline-block;
        width: 15px;
        height: 16px;
        margin-right: 10px;
        vertical-align: middle;
        background: url("~@/assets/login/loc.png") no-repeat;
        background-size: cover;
    }
    .breadcrumb__item{ 
        span{
            color: #151515;
        }
        &.active{
            cursor: pointer;
        }
    }
}
</style>