vue三级路由显示+面包屑 啊

问题一：如何让三级路由内容显示显示在一级路由页面

可以说是我点级二级路由导航的时候是不发生跳转的，但还要去动态的生成面包屑

const routes = [{
  path: '/',
  name: 'Home',
  component: Home,
  redirect: '/home',
  meta: {
    title: "首页"
  },
  children: [{
      path: '/home',
      name: 'homeContent',
      component: () => import('../views/home/insideComponent/homeContent.vue'),
    },
    // 采集管理
    {
      path: "/collectmanage",
      meta: {
        title: "采集管理"
      },
      component: () => import('../components/publish.center.vue'),
      children: [{
          path: '/serverManage',
          name: 'serverManage',
          component: () => import('../views/collectmanage/serverManage.vue'),
          meta: {
            title: "服务器管理"
          }
        },
        {
          path: '/dataListManage',
          name: 'dataListManage',
          component: () => import('../views/collectmanage/dataListManage.vue'),
          meta: {
            title: "数据表管理"
          }
        },
      ]
    },
   ]} 

解决方法 （中间件）

我在二级路由定义的时候，导入的一个名为publish.center.vue的组件，这个组件

<template>
    <router-view></router-view>
</template>
<script>
export default {
}
</script>

这个组件加了一个router-view,用来起到一个中间件作用，就可以实现了。

面包屑的实现

这个我使用的是element的面包屑

     <header class="bread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="(item,index) in breadlist"  :key="index" :to="{ path: '/' }">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </header>


// 利用监听器调用 getBreadcrumb方法
  watch:{
    $route(e){
      this.getBreadcrumb()
      console.log(e);
    }
  }
    getBreadcrumb(){
      let matched = this.$route.matched;
      this.breadlist=matched
    }