核心代码
watch: {
$route() {
this.getBreadcrumb()
}
}
methods: {
getBreadcrumb() {
console.log(this.$route.matched) //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组
if (Object.keys(this.$route.matched[0].meta).length > 0) {
this.breadList = this.$route.matched
} else {
this.breadList = []
}
}
},
<el-breadcrumb separator="/">
<el-breadcrumb-item
:to="{ path: '/home' }"
>
首页
</el-breadcrumb-item>
<el-breadcrumb-item
:to="{path: item.path}"
v-for="(item, index) in breadList"
:key="index"
>
{{item.meta.title}}
</el-breadcrumb-item>
</el-breadcrumb>