解决登录后浏览器后台Breadcrumb组件报错

ruoyi-ui/src/components/Breadcrumb/index.vue

@@ -1,74 +1,74 @@
-<template>
+<template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
+    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <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.meta.title }}</span>
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
-      </el-breadcrumb-item>
+      </el-breadcrumb-item>
-    </transition-group>
+    </transition-group>
-  </el-breadcrumb>
+  </el-breadcrumb>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {
+export default {
-  data() {
+  data() {
-    return {
+    return {
-      levelList: null
+      levelList: null
-    }
+    }
-  },
+  },
-  watch: {
+  watch: {
-    $route(route) {
+    $route(route) {
-      // if you go to the redirect page, do not update the breadcrumbs
+      // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
+      if (route.path.startsWith('/redirect/')) {
-        return
+        return
-      }
+      }
-      this.getBreadcrumb()
+      this.getBreadcrumb()
-    }
+    }
-  },
+  },
-  created() {
+  created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb()
-  },
+  },
-  methods: {
+  methods: {
-    getBreadcrumb() {
+    getBreadcrumb() {
-      // only show routes with meta.title
+      // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      const first = matched[0]
-
+
-      if (!this.isDashboard(first)) {
+      if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
-      }
+      }
-
+
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
+    },
-    isDashboard(route) {
+    isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name
-      if (!name) {
+      if (!name) {
-        return false
+        return false
-      }
+      }
-      return name.trim() === '首页'
+      return name.trim() === 'Index'
-    },
+    },
-    handleLink(item) {
+    handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item
-      if (redirect) {
+      if (redirect) {
-        this.$router.push(redirect)
+        this.$router.push(redirect)
-        return
+        return
-      }
+      }
-      this.$router.push(path)
+      this.$router.push(path)
-    }
+    }
-  }
+  }
-}
+}
-</script>
+</script>
-
+
-<style lang="scss" scoped>
+<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
+.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
+  display: inline-block;
-  font-size: 14px;
+  font-size: 14px;
-  line-height: 50px;
+  line-height: 50px;
-  margin-left: 8px;
+  margin-left: 8px;
-
+
-  .no-redirect {
+  .no-redirect {
-    color: #97a8be;
+    color: #97a8be;
-    cursor: text;
+    cursor: text;
-  }
+  }
-}
+}
-</style>
+</style>