vue动态面包屑导航_vue面包屑导航实现

说明：根据不同的页面动态生成不同的面包屑导航

（不用在每个页面写死面包屑）

router.js路由文件：

{
    path:'/index',
    name:'index',
    component:()=>import('@/views/home/index.vue'),
    meta:{
      title:'首页'
    },
    children:[
      {
        path:'/home',
        name:'home',
        component:()=>import('@/views/home/home.vue'),
        meta:{
          title:'home页'
        },
        children:[
          {
            path:'/second',
            name:'second',
            component:()=>import('@/views/home/second.vue'),
            meta:{
              title:'second'
            }
          }
        ]
      },
     
    ]
  },

给每个路由添加元信息meta ,定义属性title（面包屑的名称）

自定义组件Bread.vue

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in breadlitst" :key="item">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
 
<script>
export default {
  name: "V2Bread",
 
  data() {
    return {
        breadlitst:[]
    };
  },
 
  mounted() {
    // console.log(this.$route)
  },
 
  methods: {},
  watch:{
    $route:{
        handler(route){
            let List = route.matched;
            List.forEach(item => {
                this.breadlitst.push(item.meta.title)
            });
        },immediate:true
    }
  }
};
</script>
 
<style lang="scss" scoped></style>

监听route ， 可以拿到meta的信息，放到数组中 遍历面包屑

<template>
  <div id="app">
    <Bread />
    <router-view />
  </div>
</template>
<script>
import Bread from '@/components/bread.vue'
export default {
  data() {
    return {};
  },
  components:{
    Bread
  }
};
</script>
<style></style>

把面包屑组件放到router-view前即可 这样每个页面都可访问到这个组件 并且是动态生成；