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
    }