如何在Nuxt中构建api/users/${userID}/${userDbID}格式的API路由？

Nuxt 3 实现方式 #

Nuxt 3通过server/api目录定义API路由，你可以通过两种方式实现/api/users/${userID}/${userDbID}这类多级参数路由：

方法1：动态目录+文件匹配 #

在server/api/users目录下创建[userID]/[userDbID].ts（或.js）文件，文件名中的方括号代表动态参数：

// server/api/users/[userID]/[userDbID].ts
export default defineEventHandler(async (event) => {
  // 提取路由参数
  const { userID, userDbID } = getRouterParams(event)
  
  // 这里编写业务逻辑，比如从数据库拉取用户帖子
  const posts = await fetchUserPosts(userID, userDbID)
  
  return {
    status: 200,
    data: posts
  }
})

启动项目后，即可通过/api/users/123/456访问，其中123对应userID，456对应userDbID。

方法2：单文件通配符处理 #

若不想创建多层目录，可在server/api/users.ts中用通配符路由实现：

// server/api/users.ts
export default defineEventHandler(async (event) => {
  // 拆分通配符参数
  const params = event.context.params?.['*']?.split('/')
  if (!params || params.length !== 2) {
    return createError({ statusCode: 400, message: '参数格式错误' })
  }
  const [userID, userDbID] = params
  
  // 业务逻辑
  const posts = await fetchUserPosts(userID, userDbID)
  
  return {
    status: 200,
    data: posts
  }
})

同时需要在nuxt.config.ts中配置路由规则：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/users/**': { handler: 'server/api/users.ts' }
    }
  }
})

Nuxt 2 实现方式 #

Nuxt 2推荐使用serverMiddleware实现自定义API路由：

步骤1：创建API处理文件 #

在项目根目录下新建server-middleware/users.js：

// server-middleware/users.js
const express = require('express')
const router = express.Router()

router.get('/users/:userID/:userDbID', async (req, res) => {
  const { userID, userDbID } = req.params
  
  // 编写业务逻辑，获取用户帖子数据
  const posts = await fetchUserPosts(userID, userDbID)
  
  res.status(200).json({
    data: posts
  })
})

module.exports = router

步骤2：配置serverMiddleware #

在nuxt.config.js中注册中间件：

// nuxt.config.js
export default {
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/users.js' }
  ]
}

完成后即可通过/api/users/123/456访问，参数会自动解析到req.params中。

注意事项 #

• 务必添加参数校验逻辑，避免非法参数引发服务端错误
• Nuxt 3使用的getRouterParams是Nitro内置方法，无需额外引入
• Nuxt 2使用serverMiddleware需先安装express（执行npm install express）

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