Nuxt 3 升级后 vue-router 配置报错，通常是因为保留了 Nuxt 2 的 router.extendRoutes 配置写法。Nuxt 3 默认使用文件路由系统，修复方法是移除 nuxt.config.ts 中的旧路由配置，改用 pages 目录结构或 pages:extend 钩子。

快速处理思路

如果项目无法启动或控制台报路由配置错误，按以下顺序操作：

1. 打开 nuxt.config.ts 文件。
2. 查找并删除 router: { extendRoutes: ... } 代码块。
3. 将原有路由逻辑迁移至 pages/ 目录文件名或 pages:extend 钩子。

为什么会这样

Nuxt 3 重构了路由系统，默认启用基于文件的路由生成机制。Nuxt 2 中常用的 router.extendRoutes 配置项在 Nuxt 3 中已被移除，继续保留会导致配置解析失败。Vue Router 4 的实例初始化方式也发生了变化，不再允许通过配置文件直接干预路由表构建。

分步处理

步骤 1：清理配置文件

检查 nuxt.config.ts，移除所有与 router 相关的配置对象。如果存在 middleware 全局注册，也需移除。

// 错误写法（Nuxt 2）
export default defineNuxtConfig({
  router: {
    extendRoutes(routes, resolve) {
      // ...
    }
  }
})

// 正确写法（Nuxt 3）
export default defineNuxtConfig({
  // 删除 router 配置块
})

步骤 2：迁移动态路由

Nuxt 2 使用下划线 _id.vue 表示动态参数，Nuxt 3 使用中括号 [id].vue。重命名 pages 目录下的相关文件。

步骤 3：迁移中间件

将中间件文件放入 middleware/ 目录。在页面中使用 definePageMeta 声明，不再在配置文件中全局注册。

// 页面中使用
<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

怎么验证是否生效

执行构建命令 npm run build 或开发命令 npm run dev。观察控制台输出，确认没有 TypeError 或 Unknown property 相关报错。访问原有路由路径，确认页面能正常渲染且参数获取正确。

常见坑

• 中间件命名：Nuxt 3 中间件默认全局注册，文件名即名称，注意大小写匹配。
• 嵌套路由： 确保 pages 目录结构正确反映嵌套关系，必要时使用 .vue 文件内部插槽。
• 路由元信息： 原 meta 配置需迁移至 definePageMeta 中。

常见问题

如何保留旧版路由配置逻辑？

不能直接保留，需使用 pages:extend 钩子在构建时修改路由表，或改用文件命名规则。

升级后中间件不生效怎么办？

检查中间件文件是否位于 middleware/ 目录，并在页面中通过 definePageMeta 正确引用。

参考来源

• Nuxt 官方文档 - 迁移指南：https://nuxt.com/docs/getting-started/upgrade
• Nuxt 官方文档 - 页面路由：https://nuxt.com/docs/guide/directory-structure/pages