<style rel="stylesheet/scss" lang="scss" scoped>
.app-levelbar.el-breadcrumb {
display:inline-block;
font-size:12px;
line-height:50px;
margin-left:10px;
.no-redirect {
color:#97a8be;
cursor:text;
}
}
<el-breadcrumb class="app-levelbar" separator="/">
<el-breadcrumb-item v-for="(item,index) inlevelList" :key="item.path">
<router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}
<router-link v-else :to="item.redirect||item.path">{{item.name}}
export default {
created() {
this.getBreadcrumb()
},
data() {
return {
levelList:null
}
},
methods: {
getBreadcrumb() {
let matched =this.$route.matched.filter(item => item.name)
const first = matched[0]
if (first && (first.name !=='Home' || first.path !=='')) {
matched = [{
name:'Home',
path:'/'
}].concat(matched)
}
this.levelList = matched
}
},
watch: {
$route() {
this.getBreadcrumb()
}
}
}
https://segmentfault.com/q/1010000010542976?sort=created
