export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: ()=>import ('@/views/Home.vue'),
      meta:{
        title: '我是home',
            breadcrumb:[
              {
                name:'home1',
                path:'/home1'
              },
              {
                name:'home2',
                path:'/home2'
              },
              {
                name:'home3',
                path:'/home3'
              }
            ]
      },
      children:[{
         
        path: "luyou",
        name: "luyou",
        component: () =>
          import( "./views/About.vue"),
        meta:{
          title: '我喜欢的海贼王luyou',
              breadcrumb:[
                {
                  name:'索隆luyou',
                  path:'/suolong'
                },
                {
                  name:'路费luyou',
                  path:'/lufei'
                },
                {
                  name:'鹰眼luyou',
                  path:'/yingyan'
                }
              ]
        }
    
      }]
    }
  ]
 })

script里面的写法

<el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: item.path }" v-for="(item,index) in this.$router.history.current.meta.breadcrumb" :key="index">{{item.name}}</el-breadcrumb-item> 
</el-breadcrumb>

页面效果如下:


这个使用是单独页面的使用,全局使用推荐看这个人的,写的非常棒
https://www.jianshu.com/p/efa6c7378963