多个router-view嵌套问题

Question

我在使用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

Answer 1

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