matched和meat实现面包屑导航

配置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>