一步步创建一个vue项目（四）面包屑

一步步创建一个vue项目（四）面包屑

根据element-ui生产面包屑

就是这个样子

这个代码是根据vue-element-admin中的代码通过理解整理出来的
代码：

<template>
<!-- separator:分隔符 -->
  <el-breadcrumb class="app-levelbar" separator="/">
    <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
      <!-- 这里显示当前页面的面包屑名称 -->
      <span
        v-if="item.redirect === 'noredirect' || index == levelList.length - 1"
        class="no-redirect"
        >{
    
    {
    
     item.name }}</span
      >
      <!-- 显示前面的页面的可跳转面包屑名称 -->
      <router-link v-else :to="item.redirect || item.path">{
    
    {
    
    
        item.name
      }}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
    
    
  created () {
    
    
    this.getBreadcrumb()
  },
  data () {
    
    
    return {
    
    
      levelList: null
    }
  },
  methods: {
    
    
    getBreadcrumb () {
    
    
      // this.$route.matched包含当前路由的所有嵌套路径片段的路由记录
      // filter过滤器把符合条件的过滤出来，这个地方是把数组的item.name === true过滤出来
      let matched = this.$route.matched.filter((item) => item.name)
      // 通常数组[0]是这个路由的根节点的name
      const first = matched[0]
      // 如果最初的不是首页
      if (first && (first.name !== '首页' || first.path !== '')) {
    
    
        // 使用concat函数连接前后两个数组，把首页添加进去
        matched = [{
    
     name: '首页', path: '/' }].concat(matched)
      }
      this.levelList = matched
    }
  },
  watch: {
    
    
    // 监视$route的变化，变化就触发方法，这样面包屑的内容也会一直变化
    $route () {
    
    
      this.getBreadcrumb()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-levelbar.el-breadcrumb {
    
    
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 10px;
  .no-redirect {
    
    
    color: #97a8be;
    cursor: text;
  }
}
</style>