meta:{bread:[“账户管理”,“所有人员”]},面包屑都在路由中写成这种形式的
router
{
path:"account/all",
name:"All",
meta:{bread:["账户管理","所有人员"]},//meta中定义面包屑
component:()=>import("@/views/account/All")
}
封装的组件
breadCrumb.vue
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
item
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
breadList: [],
};
},
created() {
this.getbreadCrumb();
},
watch:{//存在一种情况,动态路由,路由变了生命周期是不会触发的,所以要监听一下
$route(){
this.getbreadCrumb();
}
},
methods: {
getbreadCrumb() {
this.breadList = this.$route.meta?this.$route.meta.bread:[];
},
},
// 或者用计算属性
// computed:{
// breadList(){
// return this.$route.meta?this.$route.meta.bread:[]
// }
// }
};
</script>
<style lang="less" scoped>
</style>
在页面中使用
All.vue
<template>
<div>
//显示的位置
<bread-crumb></bread-crumb>
</div>
</template>
<script>
import breadCrumb from "@/mixins/breadCrumb.vue"
export default {
components:{
breadCrumb,
}
};
</script>
<style lang="less" scoped>
</style>
效果