fix 面包屑组件 有重复项 自动隐藏

src/components/Breadcrumb.vue

@@ -1,18 +1,18 @@
 <template>
   <el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
     <el-breadcrumb-item>
-      <!-- <router-link to="/">飞机主控</router-link> -->
       {{ $route.meta.tapName === "plane" ? "飞机主控" : "小程序后台" }}
     </el-breadcrumb-item>
-    <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
-      <!-- <router-link :to="item.path">{{ item.title }}</router-link> -->
+    <el-breadcrumb-item
+      v-for="(item, index) in filteredBreadcrumb"
+      :key="index"
+    >
       {{ item.title }}
     </el-breadcrumb-item>
   </el-breadcrumb>
 </template>
 
 <script>
-
 export default {
   name: 'Breadcrumb',
   data () {
@@ -29,7 +29,9 @@ export default {
      */
     routes () {
       return this.$router.options.routes.filter(
-        item => item.meta.hidden !== true && item.meta.roles.indexOf(this.$store.state.user.power.trim()) >= 0
+        item =>
+          item.meta.hidden !== true &&
+          item.meta.roles.indexOf(this.$store.state.user.power.trim()) >= 0
       )
     },
     /**
@@ -37,6 +39,16 @@ export default {
      */
     presentPath () {
       return this.$route.path
+    },
+    /**
+     * @description: 过滤重复的面包屑
+     */
+    filteredBreadcrumb () {
+      const list = this.breadcrumb
+      if (list.length <= 1) return list
+      const last = list[list.length - 1]
+      const isDuplicate = list.slice(0, -1).some(item => item.title === last.title)
+      return isDuplicate ? [last] : list
     }
   },
   watch: {
@@ -79,7 +91,6 @@ export default {
   display: block !important;
 }
 
-/* 当屏幕宽度小于等于480px时 */
 @media (max-width: 480px) {
   .app-breadcrumb {
     display: none !important;