!287 更新到【默认首页使用keep-alive缓存】后报错
Merge pull request !287 from wangzhaoqiang/master
This commit is contained in:
		
						commit
						268468fb47
					
				| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue