如何在Nuxt中使用无index.vue的父页面文件夹并解决路由404？

针对你不想在parentfolder下创建index.vue，但访问parentfolder/时出现404的情况，有以下几种实用处理方式：

1. 配置路由重定向 #

直接在nuxt.config.ts（或nuxt.config.js）里添加重定向规则，把父路径指向目标子页面：

export default defineNuxtConfig({
  router: {
    redirects: {
      '/parentfolder': '/parentfolder/about/name'
    }
  }
})

这样用户访问parentfolder/时会自动跳转到parentfolder/about/name，完全不需要父文件夹下的index.vue文件。

2. 用动态路由捕获父路径 #

创建pages/parentfolder/[...catchAll].vue文件，这个文件会匹配所有parentfolder/开头的路径（包括父路径本身）。在组件里判断并处理：

<template>
  <!-- 可选：如果不想跳转，这里可以渲染父路径的自定义内容 -->
</template>

<script setup>
const route = useRoute()

// 当访问的是父路径（catchAll参数为空），重定向到目标子页面
if (route.params.catchAll?.length === 0) {
  navigateTo('/parentfolder/about/name')
}
</script>

这种方式更灵活，既可以选择重定向，也能直接在父路径下展示自定义内容。

3. 路由中间件拦截 #

通过中间件拦截父路径的请求：

1. 在项目根目录的middleware文件夹下创建redirectParent.ts：

export default defineNuxtRouteMiddleware((to) => {
  if (to.path === '/parentfolder') {
    return navigateTo('/parentfolder/about/name')
  }
})

2. 在nuxt.config.ts里注册这个全局中间件：

export default defineNuxtConfig({
  router: {
    middleware: ['redirectParent']
  }
})

这种方式适合需要对多个路径做统一拦截处理的场景。

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