关于vue.js:vueelementUI写一个面包屑导航

废话少说，间接上代码。

页面布局代码：

<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);
    }
  }
};

好了，最简略的面包屑导航曾经实现了。