vue封装面包屑组件
时间: 2023-11-02 14:07:45 浏览: 43
好的,针对你的问题,我可以给出一个简单的面包屑组件的封装示例:
```vue
<template>
<div class="breadcrumb">
<span v-for="(item, index) in items" :key="index">
<router-link :to="item.path">{{ item.name }}</router-link>
<span v-if="index !== items.length - 1">/</span>
</span>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
props: {
routes: {
type: Array,
required: true
}
},
computed: {
items() {
return this.routes.map(route => ({
name: route.meta.title,
path: route.path
}))
}
}
}
</script>
<style scoped>
.breadcrumb {
display: flex;
align-items: center;
}
.breadcrumb span {
margin-right: 5px;
}
.breadcrumb span:last-child {
font-weight: bold;
}
</style>
```
这个组件接收一个 `routes` 数组作为参数,每个元素都是一个路由对象。组件会根据路由对象的 `meta.title` 属性来渲染面包屑导航。你可以在路由配置中设置 `meta.title` 来指定每个页面的标题。