elementUI实现组件动态面包屑导航
时间: 2023-08-17 08:26:41 浏览: 54
要实现动态面包屑导航,需要在每个页面的组件中设置`breadcrumb`面包屑属性。ElementUI提供了`el-breadcrumb`组件来实现面包屑导航,我们可以通过`v-for`指令来动态生成面包屑导航。
下面是一个示例代码:
```html
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item
v-for="(item, index) in breadcrumbList"
:key="index"
:to="item.path"
>
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
<!-- 此处为页面内容 -->
</div>
</template>
<script>
export default {
data() {
return {
breadcrumbList: [], //面包屑导航列表
};
},
mounted() {
this.breadcrumbList = this.$route.matched.filter(
(route) => route.meta.breadcrumb
).map(
(route) => ({
name: route.meta.breadcrumb,
path: route.path,
})
);
},
};
</script>
```
在上面的代码中,我们首先在`<el-breadcrumb>`中设置了`separator`属性,用于设置面包屑分隔符。然后使用`v-for`指令动态生成面包屑项,并通过`:to`属性设置面包屑项的跳转链接。
在`mounted`生命周期钩子中,我们获取当前页面路由对应的路由记录,并筛选出有设置`breadcrumb`属性的路由记录,将它们转换为面包屑项。最后将面包屑项赋值给`breadcrumbList`数组,用于在模板中动态生成面包屑导航。