vue中封装面包屑组件，2021.8.12

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>

效果