vue框架上对element-ui的面包屑的简单应用

首先，我们来看看element-ui官方给出的代码样例：

代码：

<el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item> 
</el-breadcrumb>

效果：

官方文档给出的是静态的面包屑的写法，按照这种写法的话，以上4个页面，每个页面都必须写上面包屑，页面少的话还可以；如果页面多的话，这样写就很麻烦，且不利于扩展。

于是写在多级路由下使其动态化：

首先配置路由：

{ 
    path:'/main', name:'Main', 
    component:Main, 
    redirect:{ name:'ItemList' }, 
    meta:{ 
        title:"我的工作台", 
        showInbreadcrumb:true 
},

在默认路由配置的基础上增加了meta以及title和showInbreadcrumb

title用于配置面包屑显示的当前页面路径

showInbreadcrumb用于判断是否显示title

然后在写面包屑的页面上：

面包屑：

<div class="breadcrumb" style="padding: 5px 0px 10px 0px"> 
    <el-breadcrumbseparator-class="el-icon-arrow-right"> 
        <el-breadcrumb-itemv-for="(item, index) in breadcrumb":key="index":to=" {path: item.path}"> {{ item.meta.title }} 
        </el-breadcrumb-item> 
    </el-breadcrumb> 
</div>

获取路由配置的信息：

computed:{ 
    routes(){ 
           return this.$router.options.routes.filter((item)=>{ 
                return item.meta.showInbreadcrumb 
           } 
       ); 
   }, 
    breadcrumb(){ 
            let matachedArr=this.$route.matched.filter((item)=>{ 
                return item.meta.showInbreadcrumb 
            }); 
        return matachedArr 
    } 
}

现在分级路由面包屑动态化就可以了。

但是又遇到了一个问题，我如果分了多级路由，有一个页面即要作为二级路由显示在面包屑上，又要作为三级路由渲染在页面上;那么只需要在路由上这么配置就好：

{ 
    path:'/item/list', 
    name:'ItemList', 
    component:{render:h=>h('router-view')},
    redirect:{name:'ItemListSelf'}, 
    meta:{ 
        title:"商品列表",
        showInbreadcrumb:true 
    }, 
    children:[ 
        { 
        path:'/item/list', 
        name:'ItemListSelf',
        component:ItemList,
        meta:{ 
            title:"商品列表",
            showInbreadcrumb:false 
        }       
    ] 
},