Nuxt3 pages:extend添加同名路由文件引发路由名称覆盖及失效问题

问题场景 #

• 在pages/test.vue中通过definePageMeta定义路由名称为test，对应路径/test
• 在nuxt.config.ts的pages:extend钩子中添加新路由：名称testExtend、路径/testExtend，关联文件~/pages/test.vue
• 运行后异常：新增路由名称被test.vue的test覆盖，原/test路由失效且在开发者工具Pages面板中无法找到

原因 #

Nuxt3中，多个路由关联同一个页面文件时，页面内的definePageMeta会覆盖所有关联路由的元数据（包括路由名称），同时路由系统会因名称冲突覆盖掉原路由。

解决方案 #

方案一：复制页面文件，隔离元数据

复制pages/test.vue为pages/test-extend.vue，在钩子中关联新文件：

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'testExtend',
        path: '/testExtend',
        file: '~/pages/test-extend.vue'
      })
    }
  }
})

两个页面文件的definePageMeta互不干扰，原/test路由可正常使用。

方案二：手动指定新路由的元数据

无需复制文件，在添加路由时明确设置meta.name，同时保留原路由的元数据：

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      const originalTestRoute = pages.find(p => p.name === 'test')
      if (originalTestRoute) {
        // 确保原路由元数据不丢失
        originalTestRoute.meta = originalTestRoute.meta || {}
        // 添加新路由并手动指定名称
        pages.push({
          name: 'testExtend',
          path: '/testExtend',
          file: '~/pages/test.vue',
          meta: {
            name: 'testExtend'
          }
        })
      }
    }
  }
})

此方法需确保原路由被正确匹配，新路由的meta.name会优先于页面内的definePageMeta生效。

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