Nuxt3中双路由渲染同一页面出现404错误的技术问询

问题根源 #

你之前在nuxt.config.js中配置自定义路由时，大概率是组件路径错误或路由规则配置不当，导致Nuxt无法匹配到对应页面，触发404错误。

方案1：使用Route Rules（推荐） #

无需修改现有pages结构，直接在nuxt.config.js中通过routeRules将根路由映射到ecosystem.vue：

export default defineNuxtConfig({
  routeRules: {
    '/': { component: '~/pages/ecosystem.vue' },
    // /ecosystem 会自动匹配pages/ecosystem.vue，无需额外配置
  },
  // 确保默认布局生效
  layouts: {
    default: '~/layouts/DefaultLayout.vue'
  }
})

配置后，/和/ecosystem都会渲染ecosystem.vue的内容，且自动应用你定义的DefaultLayout。

方案2：组件复用方式 #

在pages目录下创建index.vue，直接导入并复用Ecosystem组件：

<!-- pages/index.vue -->
<template>
  <Ecosystem />
</template>

<script setup>
import Ecosystem from './ecosystem.vue'
</script>

这种方式下，/路由会渲染index.vue，而index.vue直接复用ecosystem.vue的内容，和/ecosystem路由完全一致，同时默认布局也会正常生效。

排查旧配置的404问题 #

如果你之前手动配置了router选项（自定义路由表），常见错误是组件路径缺失~/前缀，或者路由规则覆盖了默认路由逻辑。例如错误配置：

// 错误示例：组件路径未加~/前缀
export default defineNuxtConfig({
  router: {
    routes: [
      { path: '/', component: 'pages/ecosystem.vue' }, // 错误路径
      { path: '/ecosystem', component: '~/pages/ecosystem.vue' }
    ]
  }
})

若坚持使用自定义路由表，务必确保组件路径为~/pages/ecosystem.vue，且不要随意覆盖Nuxt的默认路由生成机制。

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