在 Nuxt 3 的服务端（ server ）/ api 接口中，如何传递参数？

在 Nuxt 3 中传递参数到服务器或 API 主要涉及到两个方面：路由参数和查询参数。

1. 使用路由参数

在 Nuxt 3 中，你可以通过动态路由来传递参数。例如，假设你有一个用户详情页面，你可以设置一个动态路由来接收用户 ID。路由文件可以命名为 pages/users/[id].vue。

在这个文件中，你可以使用 useRoute 函数来获取路由参数：

javascript
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const userId = route.params.id
</script>

然后，你可以使用这个 userId 来发起 API 请求，获取用户的详细信息。例如：

javascript
import { useFetch } from 'nuxt/app'

const { data: userInfo } = useFetch(`/api/users/${userId}`)

2. 使用查询参数

查询参数通常用于过滤或搜索请求。例如，如果你想根据用户名搜索用户，你可以在 API 请求中加入查询字符串。

在 Nuxt 3 中，你可以使用 useRoute 来获取查询参数：

javascript
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const searchQuery = route.query.search
</script>

然后，你可以使用这个查询参数来构建你的 API 请求：

javascript
import { useFetch } from 'nuxt/app'

const { data: searchResults } = useFetch(`/api/users?search=${searchQuery}`)

示例：用户搜索页面

假设我们在 Nuxt 3 应用中开发一个用户搜索页面，用户可以输入搜索词来查找特定用户。以下是该页面的一个简单示例：

页面组件：

vue
<template>
  <div>
    <input v-model="searchTerm" @input="fetchSearchResults" placeholder="Search users...">
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useFetch } from 'nuxt/app'

const searchTerm = ref('')

const { data: users } = useFetch('/api/users', {
  watch: [searchTerm],
  params: {
    search: searchTerm
  }
})

const fetchSearchResults = () => {
  users.refresh()
}
</script>

在这个示例中，每当用户在搜索框中输入时，fetchSearchResults 函数将被触发，useFetch 会重新拉取数据，并传入新的查询参数。这是一个面向实际应用的示例，展示了如何在 Nuxt 3 中处理动态查询参数。