vue利用meta做动态面包屑

**单独编写一个组件文件 Breadrumb.vue**
**第一套样式采用element-ui的样式**
  <div class="example-container">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >{
    
    {
    
    item.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
     </div>
**第二套基础css样式**
 <div >
        <span v-for="(item,index) in breadList">
          <router-link :to="{path:item.path}" :key="item.path" style="color:#09C762">
          <span>{
    
    {
    
    item.meta.title}}</span>
          <template>{
    
    {
    
    index !== breadList.length - 1 ? '/' : ''}}</template>
          </router-link>
          <span v-if="index == breadList.length">{
    
    {
    
    item.meta.title}}</span>
        </span>
      </div>   
**js部分**
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        breadList: [] // 路由集合
      };
    },
    watch: {
    
    
      $route() {
    
    
        this.getBreadcrumb();
      }
    },
    methods: {
    
    
      isHome(route) {
    
    
        return route.name === "Index";
      },
      getBreadcrumb() {
    
    
        let matched = this.$route.matched;
        //如果不是首页就拼接路由
        if (!this.isHome(matched[0])) {
    
    
          matched = [{
    
     path: "/", meta: {
    
     title: "首页" } }].concat(matched);
        }
        this.breadList = matched;

      }
    },
    created() {
    
    
      this.getBreadcrumb();
    }
  }
</script>

**router文件**
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'Index',
      component: Index,
       meta: {
    
     title: '首页' }
    },
    {
    
    
      path: '/goodsDetails',
      name: 'GoodsDetails',
      component: GoodsDetails,
      meta: {
    
     title: '商品详情' },
       children: [{
    
    
      path: '/keyard',
      name: 'keyard',
      component: keyard,
       meta: {
    
     title: '商品系统' },
    }]
    }
   ]
})

**文件引用*
<template>
<div>
 <Breadrumb></Breadrumb>
</div>
</template>
<script>
import Breadrumb from '@/components/Breadrumb.vue'
components: {
    
    
      Breadrumb
    }
</script>