之前自己實(shí)現(xiàn)過一個(gè)，但是樣式上有點(diǎn)丑
現(xiàn)在用的是element ui

大致也就是對(duì)一個(gè)對(duì)象循環(huán)一下，綁定下他的name和href,最后一個(gè)樣式和其他不一樣...

這是一個(gè)二級(jí)的, 多級(jí)的也是這樣實(shí)現(xiàn)的, 在每個(gè)router上加上meta屬性

<template>
  <div class="breadcrumb">
    <span class="parent">{{parent}}</span>
    <span class="separator">&#62;</span>
    <span class="current">{{current}}</span>
  </div>
</template>
<script type="text/javascript">
  export default {
    name: 'breadcrumb',
    data() {
      return {
        parent: '',
        current: ''
      }
    },
    created() {
      console.log('...',this.$route)
      this.setPath(this.$route);
    },
    methods: {
      setPath(route) {
        this.parent = route.matched[0].meta;
        this.current = route.meta;
      }
    },
    watch: {
      '$route': 'setPath'
    }
  }
</script>

正好寫過相關(guān)功能，由于要求顯示中文，所以在route定義的時(shí)候 ，meta里加入了一個(gè)title屬性，
其實(shí)最主要就是第一句，這里有你想要的一切
getBreacrumb () {
      // console.log(this.$route.matched)
      let matched = this.$route.matched.filter(item => item.meta.title)
      // console.log(matched)
      const first = matched[0]
      if (first && (first.name !== '首頁' || first.path !== '')) {
        matched = [{ name: '首頁', path: '/', meta: {title: '首頁'} }].concat(matched)
      }
      this.items = matched
      this.title = this.$route.meta.title
      // console.log(this.items)
    }