VUE面包屑組件

<template>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="item in breadList"
                            :to="{path:item.path}"
                            :key="item.name">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
export default {
    created () {
        this.getBreadcrumb()
    },
    data () {
        return {
            breadList: []
        }
    },
    watch: {
        $route () {
            this.getBreadcrumb()
        }
    },
    methods: {
        getBreadcrumb () {
            let matched = this.$route.matched.filter(item => item.name)
            this.breadList = matched
        }
    }
}
</script>

注冊breadcrumb組件，並使用

 

路由配置如下：