动态面包屑组件（适合嵌套路由）

breadCrumb.vue

<template>
    <div class="bread_crumb">
        <div class="crumb">
            <div class="crumb_content">
                <a-breadcrumb separator=">">
                    <a-breadcrumb-item v-for="(item,index) in breadList" :key="index">
                        <router-link :to="{path:item.path}">{{item.meta.title}}</router-link>
                    </a-breadcrumb-item>
                </a-breadcrumb>
                <div class="go_back" @click="goBack">上一页</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'breadCrumb',
    data(){
        return{
            breadList:[],  //路由集合
        }
    },
    created(){
        this.getBreadCrumb()
    },
    mounted(){
        
    },
    watch:{
        $route(){
            this.getBreadCrumb()
        }
    },
    methods:{
        //返回上一页
        goBack(){
            this.$router.go(-1)
        },
        getBreadCrumb(){
            let matched=this.$route.matched
            this.breadList=[{path:'/',meta:{title:'首页'}}].concat(matched)
        }
    }
}
</script>

<style scoped lang="less">

    .bread_crumb{
        .crumb{
            100%;
            background-color: #f7f7f7;
            .crumb_content{
                1200px;
                margin: 0 auto;
                overflow: hidden;
                .ant-breadcrumb{
                    height:30px;
                    line-height: 30px;
                    float: left;
                    a{
                        font-size: 14px;
                        color: #a1a1a1;
                        text-decoration: none;
                    }
                    a:hover{
                        color: #0169b1;
                    }
                    span:last-child{
                        a{
                            color: #0169b1;
                        }
                    }
                }
                .go_back{
                    float: right;
                    height:30px;
                    line-height: 30px;
                    cursor: pointer;
                    transition: all .4s;
                    font-size: 14px;
                    color: #a1a1a1;
                    padding: 0 20px;
                    &:hover{
                        color: #0169b1;
                    }
                }
            }
        }
    }
</style>