vue+element 动态面包屑导航

核心代码

watch: {
  $route() {
    this.getBreadcrumb()
  }
}
methods: {
    getBreadcrumb() {
    
      console.log(this.$route.matched)  //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组

      if (Object.keys(this.$route.matched[0].meta).length > 0) {
        this.breadList = this.$route.matched
      } else {
        this.breadList = []
      }
    }

  },

<el-breadcrumb separator="/">
  <el-breadcrumb-item
    :to="{ path: '/home' }"
  >
    首页
  </el-breadcrumb-item>
  <el-breadcrumb-item
    :to="{path: item.path}"
    v-for="(item, index) in breadList"
    :key="index"
  >

    {{item.meta.title}}
  </el-breadcrumb-item>
</el-breadcrumb>