elementui的面包屑使用

最新推荐文章于 2024-04-28 00:32:41 发布

yfy538

最新推荐文章于 2024-04-28 00:32:41 发布

阅读量736

点赞数 1

分类专栏： vue-cli 文章标签： elementui vue.js

本文链接：https://blog.csdn.net/yfy538/article/details/124761214

版权

vue-cli 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

<template>
    <el-breadcrumb separator="/" class="footer">
        <el-breadcrumb-item
            v-for="(v,i) in breadList"
            :key="v.path">
            <span v-if="i==breadList.length-1">{{v.meta.title}}</span>
            <router-link v-else :to="v.path" >{{v.meta.title}}</router-link>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script>
export default {
    name:'breadcrumb',
    data(){
        return{
            breadList:null,//路由集合
        }
    },
    created(){
        this.getBreadcrumb();
    },
    methods:{
        getBreadcrumb(){
            ///拿到点击的路由路径
            let matched = this.$route.matched.filter(item=>item.meta&&item.meta.title);                
            // console.log('111this.breadList',this.breadList) 上一次的router-title
            this.breadList = matched.filter(item=>item.meta&&item.meta.title&&item.meta.breadList!==false)
            // console.log('222this.breadList',this.breadList) 当前的router-title
        }
    },
    watch:{
        //路由改变时监听
        $route(router){
            this.getBreadcrumb();
        }
    }
}

</script>
<style scoped>
.footer{
    margin-bottom:10px;
    padding-left: 20px;
    background: #fff;
    height: 50px;
    line-height: 50px;
    font-size: 10px;
}
</style>

路由：
在这里插入图片描述