el-breadcrumb 面包屑导航 路由监听过滤

<template>
  <div id="app">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item, index) in list ">
        <el-breadcrumb-item :key="index" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
      </template>


    </el-breadcrumb>

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/aaa">aaa</router-link> |
      <router-link to="/bbb">bbb</router-link> |
      <router-link to="/ccc">ccc</router-link> |
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      mporary: []
    }
  },
  watch: {
    $route: {
      handler: function (to) {
        this.Calculation(to)
      },
      deep: true
    }
  },
  methods: {
  //过滤相同的对象 防止导航中显示多个相同名字
    Calculation(val) {
      this.mporary.push(val);
      let arr = this.mporary
      const arrList = (arr) => {
        const newArr = [];
        for (const t of arr) {
          if (newArr.find((c) => c.name === t.name)) { continue }
          newArr.push(t)
        }
        return newArr
      }
      this.list = arrList(arr)
    }
  },
}
</script>

<style lang="scss">
</style>

参考大佬 过滤数组对象的方法。