github上的这种功能如何使用vue实现呢

Question

github仓库的项目管理是这种效果。
下图，查看元素可以看到里面就是个连接，是个根据路由切换组件的功能，上方的蓝色文本随着进入的文件越深层越多。这个功能貌似被称作面包屑功能

那么如何使用vue-router实行这种效果呢？

Answer 1

正好写过相关功能，由于要求显示中文，所以在route定义的时候 ，meta里加入了一个title属性，
其实最主要就是第一句，这里有你想要的一切
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)
    }
    
    

Answer 2

这是一个二级的, 多级的也是这样实现的, 在每个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>

Answer 3

之前自己实现过一个，但是样式上有点丑
现在用的是element ui

大致也就是对一个对象循环一下，绑定下他的name和href,最后一个样式和其他不一样...