0

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

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

查看全部 3 个回答

3

已采纳
正好写过相关功能,由于要求显示中文,所以在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)
    }