vue elment 面包屑动态生成

================路由内添加================
meta: { title: "发货通知单查询" },
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, i) in breadArr"
:key="i"
:to="{ path: item.path }"
>
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
breadArr: [
// {path:"/",title:"首页"}
],
};
}, // 计算面包屑导航的函数
created() {
this.filterBread();
},
methods: {
filterBread() {
// 定义一个空数组
let arr = [{ path: "/shouye", title: "首页" }];
this.$route.matched.forEach((item) => {
// [{path: "/home", title: "首页"},{},{}]
循环遍历 拿到path和title push到数组中
if (item.path !== "") {
// path 不为空说明是没有子路由 没有就不push
arr.push({
path: item.path,
title: item.meta.title,
});
}
});
// 把新数组重新赋值给定义的遍历
this.breadArr = arr;
},
},
// 侦听器
watch: {
"$route.path"() {
// 重新计算面包屑
this.filterBread();
},
},
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
height: 30px;
width: 100%;
display: flex;
align-items: center;
padding: 0 10px;
font-size: 12px;
color: #333;
cursor: pointer;
}
</style>

最后

以上就是害怕月饼为你收集整理的vue elment 面包屑动态生成的全部内容，希望文章能够帮你解决vue elment 面包屑动态生成所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。