组件:
<template>
<el-breadcrumb class="breadcrumb">
<el-breadcrumb-item v-for="(item) in breadList" :key="item.name">
<router-link
v-if="item.name != name"
:to="{ path: item.path === '' ? '/' : item.path }"
>{{ item.meta.name }}</router-link>
<span v-else>{{ item.meta.title }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
data () {
return {
name: '',
breadList: []
}
},
created () {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
this.name = this.$route.name
this.breadList = []
this.breadList.push({ name: '', path: '/', meta: { title: '首页' } })
this.$route.matched.forEach(item => {
this.breadList.push(item)
})
}
},
watch: {
$route () {
this.getBreadcrumb()
}
}
}
</script>
<style scoped>
.breadcrumb {
margin: 16px 0
}
</style>