Nuxt3根目录pages下如何配置嵌套子路由？

你的问题核心是根页面（index.vue）作为父路由承载子路由，但当前文件结构不符合Nuxt3的路由约定，导致<NuxtPage>无法正确匹配子组件。

正确的文件结构调整 #

Nuxt3的pages目录路由约定中，要让index.vue成为父路由，需要将子组件放在与index.vue同级的同名文件夹内：

pages/
├── index.vue       # 父组件（根路由页面）
├── index/          # 与父组件同名的文件夹，存放子路由
│   ├── one.vue     # 子路由 /one
│   ├── two.vue     # 子路由 /two
│   └── three.vue   # 子路由 /three

或者保持子组件的index.vue结构：

pages/
├── index.vue
├── index/
│   ├── one/
│   │   └── index.vue
│   ├── two/
│   │   └── index.vue
│   └── three/
│       └── index.vue

父组件（index.vue）修改 #

确保父组件内的导航链接正确指向子路由，并且<NuxtPage>存在：

<template>
  <div>
    <nav>
      <label>
        <input type="radio" name="tab" value="/one" v-model="activeTab" />
        页面一
      </label>
      <label>
        <input type="radio" name="tab" value="/two" v-model="activeTab" />
        页面二
      </label>
      <label>
        <input type="radio" name="tab" value="/three" v-model="activeTab" />
        页面三
      </label>
    </nav>
    <!-- 子路由出口 -->
    <NuxtPage />
  </div>
</template>

<script setup>
const activeTab = ref('/one')
// 监听单选框变化，跳转路由
watch(activeTab, (newVal) => {
  navigateTo(newVal)
})
// 初始化路由
onMounted(() => {
  activeTab.value = useRoute().path
})
</script>

为什么原结构不生效？ #

原结构中pages/one/index.vue会被Nuxt解析为独立的一级路由/one，而不是/的子路由。只有当子组件放在与父路由组件同名的文件夹下时，才会被识别为该父路由的嵌套子路由。

替代方案：使用页面组件动态渲染 #

如果不想调整文件结构，也可以在父组件中直接动态渲染子组件，无需依赖路由系统：

<template>
  <div>
    <nav>
      <label>
        <input type="radio" name="tab" value="one" v-model="activeTab" />
        页面一
      </label>
      <!-- 其他单选框 -->
    </nav>
    <component :is="activeTabComponent" />
  </div>
</template>

<script setup>
const activeTab = ref('one')
const activeTabComponent = computed(() => {
  return () => import(`./${activeTab.value}/index.vue`)
})
</script>

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