一步步建立一個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>