vue三级路由显示+面包屑

文章借鉴
场景描述：三级路由覆盖二级路由页面，在一级路由页面（主页面显示），并且动态生成面包屑
问题一：如何让三级路由内容显示显示在一级路由页面
可以说是我点级二级路由导航的时候是不发生跳转的，但还要去动态的生成面包屑

利用中间件, 创建一个新vue页面，

<template>
  <router-view></router-view>
</template>

<script>
  export default {
    name: "publish"
  }
</script>

<style scoped>

</style>

router.js引入该页面，作为单独的公共路由页

	path: "/twoPublish",
      meta: {
        title: "政策查询"
      },
      component: () => import('../components/publish.vue'),
      //component: {render(c) {return c('router-view')}}

路由详情

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/circle',
    name: 'Circle',
    component: () => import('../components/CircleMenu')
  },
  {
    path: '/index',
    name: 'Index',
    component: () => import('../views/Index')
  },
  {
    path: '/list',
    name: 'List',
    component: () => import('../components/List')
  },
  {
    path: '/container',
    name: 'Container',
    component: () => import('../views/Container'),
    children: [
      {
        path: '/zccx',
        component: (resolve) => require(['@/views/zccx/index'], resolve),
        name: '政策查询',
        meta: {title: '政策查询', noCache: true, affix: true},
      },
      {
        path: "/twoPublish",
        //component: () => import('@/views/zccx/content/publish'),
        component: {render(c) {return c('router-view')}},
        meta: {title: '政策查询', noCache: true, affix: true},
        children: [
          {
            path: '/zccx/hwhlws',
            component: (resolve) => require(['@/views/zccx/content/hwhlws'], resolve),
            name: '货物和劳务税',
            meta: {title: '货物和劳务税', noCache: true, affix: true},
          },
          {
            path: "/threePublish",
            component: () => import('@/views/zccx/content/publish'),
            meta: {title: '货物和劳务税', noCache: true, affix: true},
            children: [
              {
                path: '/zccx/hwhlws/zzs',
                component: (resolve) => require(['@/views/zccx/content/hwhlws/zzs'], resolve),
                name: '增值税',
                meta: { title: '增值税', noCache: true, affix: true }
              },
            ]
          },
        ]
      },
      {
        path: '/ywcx',
        component: (resolve) => require(['@/views/ywcx/Index'], resolve),
        name: '业务查询',
        meta: { title: '业务查询', noCache: true, affix: true },
      },
    ]
  },
]

const router = new VueRouter({
  mode: 'history',
  base: '/qyzndspbvue/',
  routes
})

export default router

这个我使用的是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
    }