<template>
    <Breadcrumb v-if="showBreadcrumb">
        <Breadcrumb-item v-bind:href="item.path" v-for="item in items" :key="item.name">{{item.name}}</Breadcrumb-item>
    </Breadcrumb>
</template>

<script>
import _ from 'lodash';

export default {
    name: 'Breadcrumbs',
    data() {
        return {
            items: [],
            activeName: '',
            showBreadcrumb: false
        };
    },
    created() {
        _.remove(this.$router.beforeHooks, hook => hook.name === 'breadcrumb');
        let that = this;

        this.$router.beforeEach(function breadcrumb(to, from, next) {
            if (to.name.indexOf('error.') < 0) {
                that.showBreadcrumb = false;
                that.$nextTick(() => { // Breadcrumb更新子组件的separator，如果不手动重建Breadcrumb周期，子组件separator不会得到更新
                    that.render(to);
                });
            }
            return next();
        });
        this.render(_.get(this.$router, 'history.current'));
    },
    methods: {
        render(to) {
            this.showBreadcrumb = true;
            this.items = [{name: '首页', path: '/'}];
            this.items = this.items.concat(_.map(_.get(to, 'matched', []), match => {
                return {
                    name: match.meta.pageName
                };
            }).filter(m => m.name))

        }
    }
};
</script>

<style lang="scss">

</style>