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