vue 面包屑组件

1. BreadCrumb.vue

<template>
    <div class="breadcrumb-container">
        <i class="el-icon-s-home"></i>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <transition-group name="breadcrumb">
                <el-breadcrumb-item :to="{ name: 'Home' }" key="pages">首页</el-breadcrumb-item>
                <template v-for="(item,i) of levelList">
                    <el-breadcrumb-item :key="item.name" v-if="item.meta.title">
                        <span v-bind:class="{redirect:i<levelList.length-1}" :key="item.name" @click="routeTo(item,i<levelList.length-1)">
                            {{item.meta.title}}
                        </span>
                    </el-breadcrumb-item>
                </template>
            </transition-group>
        </el-breadcrumb>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
    export default {
        name: "BreadCrumb",
        created() {
            this.getBreadcrumb()
        },
        data() {
            return {
                levelList: null
            }
        },
        computed: {
            ...mapGetters('User',['asyncRoutesObj']),
        },
        watch: {
            $route:{
                handler(){
                    this.getBreadcrumb()
                },
                deep:true,
                immediate:true
            }
        },
        methods: {
            routeTo(data,flag){
                if(flag){
                    let currentRouter=this.asyncRoutesObj[data.name]||{};
                    if(Array.isArray(currentRouter.children) && currentRouter.children.length){
                        this.$router.push({
                            name: currentRouter["children"][0].name,
                        }).catch((err) => {});
                    } else {
                        this.$router.push({
                            name: currentRouter.name,
                        }).catch((err) => {});
                    }
                }
            },
            getBreadcrumb() {
                let matched = this.$route.matched.filter(item => item.name);
                this.levelList = matched;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .breadcrumb-container{
        width: 100%;
        overflow: hidden;
        padding: 15px 5px;
        display: flex;
        align-items: center;
        background: none;
        .el-icon-s-home{
            margin-right: 5px;
        }
    }
    .redirect{
        font-weight: 700;
        color: #303133;
        &:hover{
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>