前端Vue专辑

vue+element动态渲染面包屑可点击

2020-05-07  本文已影响0人  小水嘀哩哒

上代码~
<el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="item in levelList" :key="item.path" @click.native="breadcrumbClick(item)" style="cursor:
pointer">{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>

<script>
export default {
name:'location',
data() {
return {
levelList: []
}
},
watch: {
route() { this.getBreadcrumb() } }, created(){ this.getBreadcrumb() }, methods:{ getBreadcrumb() { let matched = this.route.matched.filter(item => item.name)
const first = matched[0];
if (first && first.name.trim().toLocaleLowerCase() !== 'Index'.toLocaleLowerCase()) {
matched = matched
}
this.levelList = matched
},
breadcrumbClick (item) {
this.$router.push({
path: item.path
})
},
}
}
</script>
可以参考我上篇文章写的路由~

上一篇 下一篇

猜你喜欢

热点阅读