面包屑导航的实现

一，实现效果

二，实现原理

利用的是meta这个路由元信息配置

官网资料：

https://router.vuejs.org/zh/guide/advanced/meta.html

我们写嵌套路由的时候：

可以定义这个meta属性，里面可以配置一些信息。

如官网所说：

那么如何访问这个 meta 字段呢？
首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。
           

也就是说，像上面定义的路由，当访问这个路由的时候，这哥matched数组中就会存储这样的一个值：console.log(‘路由信息’,this.$route);

注意看这个match数组：

里面存放的正是router.js中每一层的路由信息。

于是就可以利用这一点来实现面包屑导航

三，实现方式

<template>
  <div class="my_header">
    <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
      <transition-group name="breadcrumb" >
        <el-breadcrumb-item v-for="(item,index)  in levelList" :key="index" >
          <span v-if="index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
          <router-link v-else :to="item.path" class="route">{{item.meta.title}}</router-link>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  created() {
    this.getBreadcrumb()
  },
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      this.levelList = matched.splice(1,3)
    }
  },
}
</script>
           

这里，我首页面包屑不想显示，所以裁剪了一下：