作者 wangzhaoqiang

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

1 -<template>  
2 - <el-breadcrumb class="app-breadcrumb" separator="/">  
3 - <transition-group name="breadcrumb">  
4 - <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">  
5 - <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>  
6 - <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>  
7 - </el-breadcrumb-item>  
8 - </transition-group>  
9 - </el-breadcrumb>  
10 -</template>  
11 -  
12 -<script>  
13 -export default {  
14 - data() {  
15 - return {  
16 - levelList: null  
17 - }  
18 - },  
19 - watch: {  
20 - $route(route) {  
21 - // if you go to the redirect page, do not update the breadcrumbs  
22 - if (route.path.startsWith('/redirect/')) {  
23 - return  
24 - }  
25 - this.getBreadcrumb()  
26 - }  
27 - },  
28 - created() {  
29 - this.getBreadcrumb()  
30 - },  
31 - methods: {  
32 - getBreadcrumb() {  
33 - // only show routes with meta.title  
34 - let matched = this.$route.matched.filter(item => item.meta && item.meta.title)  
35 - const first = matched[0]  
36 -  
37 - if (!this.isDashboard(first)) {  
38 - matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)  
39 - }  
40 -  
41 - this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)  
42 - },  
43 - isDashboard(route) {  
44 - const name = route && route.name  
45 - if (!name) {  
46 - return false  
47 - }  
48 - return name.trim() === '首页'  
49 - },  
50 - handleLink(item) {  
51 - const { redirect, path } = item  
52 - if (redirect) {  
53 - this.$router.push(redirect)  
54 - return  
55 - }  
56 - this.$router.push(path)  
57 - }  
58 - }  
59 -}  
60 -</script>  
61 -  
62 -<style lang="scss" scoped>  
63 -.app-breadcrumb.el-breadcrumb {  
64 - display: inline-block;  
65 - font-size: 14px;  
66 - line-height: 50px;  
67 - margin-left: 8px;  
68 -  
69 - .no-redirect {  
70 - color: #97a8be;  
71 - cursor: text;  
72 - }  
73 -}  
74 -</style> 1 +<template>
  2 + <el-breadcrumb class="app-breadcrumb" separator="/">
  3 + <transition-group name="breadcrumb">
  4 + <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
  5 + <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
  6 + <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
  7 + </el-breadcrumb-item>
  8 + </transition-group>
  9 + </el-breadcrumb>
  10 +</template>
  11 +
  12 +<script>
  13 +export default {
  14 + data() {
  15 + return {
  16 + levelList: null
  17 + }
  18 + },
  19 + watch: {
  20 + $route(route) {
  21 + // if you go to the redirect page, do not update the breadcrumbs
  22 + if (route.path.startsWith('/redirect/')) {
  23 + return
  24 + }
  25 + this.getBreadcrumb()
  26 + }
  27 + },
  28 + created() {
  29 + this.getBreadcrumb()
  30 + },
  31 + methods: {
  32 + getBreadcrumb() {
  33 + // only show routes with meta.title
  34 + let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
  35 + const first = matched[0]
  36 +
  37 + if (!this.isDashboard(first)) {
  38 + matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
  39 + }
  40 +
  41 + this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
  42 + },
  43 + isDashboard(route) {
  44 + const name = route && route.name
  45 + if (!name) {
  46 + return false
  47 + }
  48 + return name.trim() === 'Index'
  49 + },
  50 + handleLink(item) {
  51 + const { redirect, path } = item
  52 + if (redirect) {
  53 + this.$router.push(redirect)
  54 + return
  55 + }
  56 + this.$router.push(path)
  57 + }
  58 + }
  59 +}
  60 +</script>
  61 +
  62 +<style lang="scss" scoped>
  63 +.app-breadcrumb.el-breadcrumb {
  64 + display: inline-block;
  65 + font-size: 14px;
  66 + line-height: 50px;
  67 + margin-left: 8px;
  68 +
  69 + .no-redirect {
  70 + color: #97a8be;
  71 + cursor: text;
  72 + }
  73 +}
  74 +</style>