vue+elementUI写一个面包屑导航

废话少说，直接上代码。

页面布局代码：

<div class="crumbsPage">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
      <span
        v-if="item.redirect === 'noRedirect' || index == breadList.length-1"
      >{{ item.meta.title }}</span>
      <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
    </el-breadcrumb-item>
  </el-breadcrumb>
</div>

js逻辑处理

export default {
  name: "crumbsPage",
  data() {
    return {
      breadList: []
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  methods: {
    getBreadcrumb() {
      if (Object.keys(this.$route.matched[0].meta).length > 0) {
        this.breadList = this.$route.matched;
      } else {
        this.breadList = [];
      }
    },
    handleLink(item) {
      this.$router.push(item.path);
    }
  }
};

好了，最简单的面包屑导航已经完成了。