多个router-view嵌套问题

我在使用vue-router中。一个页面使用多个router-view。我要在tabbarProfile中在加路由，遇到了嵌套问题

import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/view/index/index.vue'),
  },
  {
    path: '/tabbar',
    name: 'tabbar',
    redirect: (_) => ({ name: 'tabbarHome' }),
    component: () => import('@/view/tabbar/index.vue'),
    children: [
      {
        path: '',
        name: 'tabbarHome',
        components: {
          tabbarHome: () => import('@/view/tabbar/home/index.vue'),
          tabbarProfile: () => import('@/view/tabbar/profile/index.vue'),
        },
      
      },
    ],
  },
]

export default routes

我希望可以样这样，但是不行

import type { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/view/index/index.vue'),
  },
  {
    path: '/tabbar',
    name: 'tabbar',
    redirect: (_) => ({ name: 'tabbarHome' }),
    component: () => import('@/view/tabbar/index.vue'),
    children: [
      {
        path: '',
        name: 'tabbarHome',
        components: {
          tabbarHome: () => import('@/view/tabbar/home/index.vue'),
          tabbarProfile: {
            path: '',
            component: () => import('@/view/tabbar/profile/index.vue'),
            children,[...]
          },
        },
      },
    ],
  },
]

export default routes

我之所以需要这样。是因为我的tabbar是个swiper。需要定义多个router-view

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你看下这篇博客吧, 应该有用👉 ：Vuejs第五篇（vue-router路由和tabbar）
• 除此之外, 这篇博客: vue-tabbar切换中的 接下来是在router下路由配置，这一步很重要： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  import Vue from "vue";
  import VueRouter from "vue-router";
  // 首页
  import Home from "../views/Home.vue";
  // 课程
  import Course from "../views/Course.vue";
  // 展示页
  import FirstPage from "../views/FirstPage.vue";
  // 我的
  import Mine from "../views/Mine.vue";
  // 练习
  import Practice from "../views/Practice.vue";
  // 约课记录
  import Record from "../views/Record.vue";
  
  
  Vue.use(VueRouter);
  const routes = [
    {
      path: "/",
      name: "FirstPage",
      component:FirstPage,
      children: [
        {
          path: "",
          redirect: "home",
        },
        {
          path: "/home",
          name: "Home",
          component:Home
        },
        {
          path: "/course",
          name: "Course",
          component: Course
        },
        {
          path: "/record",
          name: "Record",
          component: Record
        },
        {
          path: "/practice",
          name: "Practice",
          component: Practice
        },
        {
          path: "/mine",
          name: "Mine",
          component: Mine
        }
      ]
    },
  
  ];
  
  const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
  });
  
  export default router;
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^