两级视图多层次面包屑展示

如图所示

现在大部分项目都是左边是菜单栏，右边是视图，定义路由的时候就成了2级视图路由，如果在某一个菜单中有多个层级，比如一个列表菜单中查看详情这种3级的面包屑，甚至像楼主这样的5级层次的深度该如果展示面包屑呢？
这里的做法是通过路由的方式，

我们通过path的值用/切割后形成一个数组，每一个值代表了一个路径，那么我们怎么知道该值代表了那个路径呢？这里就是name属性的作用了，让name（值就是path最后的/后面的值）与当前path对应起来，那么通过name方式跳转的时候，就会跳转到对应的path。那么如何解析当前path形成面包屑呢？代码如下：

      let breadcrumbPath = []
      this.$route.path.split('/').forEach(element => {
        if (element) {
        // path键作为v-for的key存在的 参考vue代码
          breadcrumbPath.push({ path: element, name: element })
        }
      });
       // 面包屑数组值
      this.levelList = breadcrumbPath
      // 提取当前路由的信息，把name作为key存储起来，为点击面包屑跳转做准备
      // 这里不用name方式直接跳转的原因在于有些路径中可能带有query参数，
      // 通过name跳转参数是拿不到的，所有这里要记录跳转过的路径信息
      let key = this.$route.name
      let value = JSON.stringify({ path: this.$route.path, query: this.$route.query })
      sessionStorage.setItem(key, value)

vue中代码如下

这里的item.name的值之所以你能转化为中文就是通过generateTitle，其本质是一个将name通过方法里调用的this.$t('route.' + title)转化而来的，其实就是国际化。如果你不需要，你也可以自定义一个由name，value组成的对象，直接通过对象取出name对应的中文。
跳转就更简单了

      let key = item.name
      let value =   sessionStorage.getItem(key) && JSON.parse(sessionStorage.getItem(key))
      if(value) {
        this.$router.push(value)
      }

至此，一个简单层级的路由做出了多级面包屑的效果。
那么如何让菜单绑定路由在进入深层次路由时，让该菜单依然处于选中状态，告知用户该深层次路由是在该菜单下呢？请参考我的另一篇文章框架中侧边菜单所关联路由在进入其他路径时丢掉选中的问题