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 }