Vue3与Vue-Router 4中命名视图嵌套子组件路由实现方案问询

首先明确你原路由配置的问题：在components的属性值里直接嵌套component和children不符合Vue Router语法——components下的每个命名视图只能对应组件配置（比如异步组件导入函数），children是路由对象的顶层属性，不属于组件配置的一部分。

完整的正确路由定义 #

以下是符合Vue Router 4规范的嵌套命名视图路由配置，完全匹配你的需求：

const routes = [
  {
    path: '/',
    // 根路由渲染全局固定布局组件
    components: {
      appbar: () => import('@/components/Appbar.vue'),
      navigation: () => import('@/components/Navigation.vue'),
      default: () => import('@/views/Triple.vue')
    },
    children: [
      {
        path: '',
        name: 'home',
        // 给Triple.vue的三个命名视图分配Table组件
        components: {
          first: () => import('@/views/Table.vue'),
          second: () => import('@/views/Table.vue'),
          third: () => import('@/views/Table.vue')
        },
        // 子路由：为每个Table.vue内的默认router-view分配对应表格组件
        children: [
          {
            path: '',
            components: {
              first: () => import('@/components/home/tableone.vue'),
              second: () => import('@/components/home/tabletwo.vue'),
              third: () => import('@/components/home/tablethree.vue')
            }
          }
        ]
      }
    ]
  }
]

逻辑说明：

1. 根路由/负责渲染全局布局（Appbar、Navigation），并将Triple.vue作为默认视图，它包含三个命名<router-view>（first/second/third）。
2. 子路由''（访问/时触发）的components属性，将Table.vue分别挂载到Triple.vue的三个命名视图中。
3. 该子路由的嵌套children，对应每个Table.vue内的默认<router-view>，把不同的表格组件分别渲染到对应层级。

最大化组件复用的优化方案 #

为避免重复编写相似配置，可通过工具函数或数组遍历简化代码：

方案1：用遍历生成重复配置

const routes = [
  {
    path: '/',
    components: {
      appbar: () => import('@/components/Appbar.vue'),
      navigation: () => import('@/components/Navigation.vue'),
      default: () => import('@/views/Triple.vue')
    },
    children: [
      {
        path: '',
        name: 'home',
        // 遍历生成三个命名视图的Table组件配置
        components: ['first', 'second', 'third'].reduce((config, viewName) => {
          config[viewName] = () => import('@/views/Table.vue')
          return config
        }, {}),
        children: [
          {
            path: '',
            components: {
              first: () => import('@/components/home/tableone.vue'),
              second: () => import('@/components/home/tabletwo.vue'),
              third: () => import('@/components/home/tablethree.vue')
            }
          }
        ]
      }
    ]
  }
]

方案2：抽象Table组件的路由片段

如果后续需要给多个页面复用Table.vue的嵌套结构，可将其封装为独立路由片段：

// 生成指定命名视图的Table嵌套路由
const createTableRoute = (viewName, childComponent) => ({
  components: { [viewName]: () => import('@/views/Table.vue') },
  children: [{ path: '', components: { [viewName]: childComponent } }]
})

const routes = [
  {
    path: '/',
    components: {
      appbar: () => import('@/components/Appbar.vue'),
      navigation: () => import('@/components/Navigation.vue'),
      default: () => import('@/views/Triple.vue')
    },
    children: [
      {
        path: '',
        name: 'home',
        // 合并三个Table路由片段
        ...createTableRoute('first', () => import('@/components/home/tableone.vue')),
        ...createTableRoute('second', () => import('@/components/home/tabletwo.vue')),
        ...createTableRoute('third', () => import('@/components/home/tablethree.vue'))
      }
    ]
  }
]

额外建议 #

如果未来需要扩展多视图布局（比如新增第四个视图），可将视图名称与对应组件的映射抽离为数组，通过遍历自动生成路由配置，进一步提升复用性。

内容的提问来源于stack exchange，提问作者Jake Steele