配置router
让需要在面包屑上展示的路由携带tittle信息
{
path: '/heritageClassify',
name: 'heritageClassify',
meta: { tittle: '全部分类' },
component: heritageClassify
}
封装面包屑组件
关键matched数组, 它按照层级保存了路由信息, 过滤这个数组, 找到携带tittle的即满足条件的
将它的path即tittle展示即可
<template>
<el-row class="breadcrumb">
<el-breadcrumb
separator-class="el-icon-arrow-right"
v-for="route in routes"
:key="route.name"
>
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: route.meta.path }">{{
route.meta.tittle
}}</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
</template>
<script>
export default {
data () {
return {
routes: []
}
},
mounted () {
this.routes = this.$route.matched.filter(route => route.meta.tittle)
}
}
</script>