Nuxt项目中useRoute()与路由参数失效，动态路由访问出现404求助

问题详情 #

我在pages/products目录下创建了[id].vue文件，代码如下：

<template>
    <div>
        <p>Hello {{ id }}</p>
    </div>
</template>

<script setup>
    const { id } = useRoute().params
</script>

<style scoped>
</style>

访问localhost:3000/products/123时，预期显示“Hello 123”，实际跳转到404页面；同时代码中的useRoute函数无任何代码提示，仿佛未被识别。普通路由可正常使用，请问需额外安装或配置什么？

我的nuxt.config.js配置：

export default {
  head: {
    title: 'meineSeite',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [],
  plugins: [],
  components: true,
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
  ],
  modules: [],
  build: {}
}

项目结构：

.nuxt
components
    Main.vue
    NuxtLogo.vue
node_modules
pages
    products
        [id].vue
        index.vue
    index.vue
static
store
.editorconfig
.gitignore
nuxt.config.js
package-lock.json
package.json
README.md
tsconfig.json

解决方案 #

1. 动态路由404问题 #

从配置和结构看，你使用的是Nuxt 2，但<script setup>并非Nuxt 2默认支持的语法，且动态路由未被识别可能有以下原因：

• 重启Nuxt开发服务器：新创建的动态路由需要Nuxt重新生成路由表，重启服务即可让路由生效；
• 安装Composition API支持：Nuxt 2要使用<script setup>和组合式API，需安装@nuxtjs/composition-api模块：

  npm install @nuxtjs/composition-api
  

  然后在nuxt.config.js的buildModules中添加：

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/composition-api/module' // 新增该行
  ]
  

• 检查依赖完整性：删除node_modules和package-lock.json，重新执行npm install修复可能损坏的依赖。

2. useRoute无代码提示问题 #

• 手动导入useRoute：在Nuxt 2中，useRoute并非全局自动导入，需从@nuxtjs/composition-api手动导入：

  <script setup>
  import { useRoute } from '@nuxtjs/composition-api'
  const { id } = useRoute().params
  </script>
  

• 校验TypeScript配置：确保tsconfig.json继承Nuxt生成的类型配置，内容应为：

  {
    "extends": "./.nuxt/tsconfig.json"
  }
  

  这样编辑器就能识别useRoute的类型定义，提供代码提示。

版本适配注意 #

你参考的教程如果是Nuxt 3内容，会和当前Nuxt 2环境不兼容：

• Nuxt 3默认支持<script setup>和自动导入useRoute，但项目结构、配置项（如无buildModules）与Nuxt 2差异极大；
• 若要跟随教程，需重新初始化Nuxt 3项目；若继续使用Nuxt 2，按上述步骤配置即可解决问题。

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