breadcrumb.vue

<style lang="less" scoped>
/deep/.ivu-breadcrumb a { color: #fff;}
/deep/.ivu-breadcrumb-item-link { color: #fff;}
</style>
<template>
    <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem v-for="(item,index) in list" :key="index" :to="item.to">{{item.title}}</BreadcrumbItem>
    </Breadcrumb>
</template>
<script>
export default {
    props: {
        breadcrumb: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data: function () {
        return {
            loading: true,
            show: false,
            list: this.breadcrumb
        };
    },
    components: {},
    methods: {
        //以路由中 pageName 为优先
        setList() {
            this.list = this.breadcrumb;
            if (this.list.length > 0 && this.list[this.list.length - 1].to == this.$route.path) {
                this.list[this.list.length - 1].title = this.$route.meta.pageName;
            }
        }
    },
    watch: {
        breadcrumb(val) {
            this.setList();
        }
    },
    created: async function () {},
    mounted: function () {
        this.setList();
    },
    //计算属性
    computed: {},
    destroyed: function () {}
};
</script>