面包屑導航的實作

一，實作效果

二，實作原理

利用的是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>
           

這裡，我首頁面包屑不想顯示，是以裁剪了一下：