How to get route parameters from Nuxt 3 server

在使用 Nuxt 3 时，获取服务器路由参数可以通过几种不同的方式实现。这些参数通常是在页面或组件中根据 URL 路径或查询字符串进行访问的。以下是几种常见的方法来获取这些路由参数：

1. 使用 useRoute 和 useRouter

在 Nuxt 3 中，你可以使用 useRoute 和 useRouter 这两个 Composition API 来获取当前路由的信息，包括路径参数和查询参数。

示例代码：

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

const route = useRoute()

const id = route.params.id  // 假设 URL 是 /users/:id
const queryParam = route.query.search  // 假设查询参数是 ?search=keyword
</script>

在这个示例中，useRoute 提供了对当前路由对象的访问，你可以通过 route.params 和 route.query 获得路径参数和查询参数。

2. 使用异步数据加载函数 asyncData

Nuxt 3 提供了 asyncData 方法，允许你在服务器端获取数据并将其作为道具传递给组件。你可以在这个方法中访问路由参数。

示例代码：

javascript
<script setup>
export async asyncData({ params, query }) {
  console.log(params.id); // 访问路径参数
  console.log(query.search); // 访问查询参数

  // 可以在这里进行一些数据处理或者 API 调用
  return {
    userId: params.id,
    searchKeyword: query.search
  };
}
</script>

在这个示例中，asyncData 方法提取路径参数和查询参数，这些参数可以用于进一步的数据处理或 API 调用。

3. 使用中间件访问路由参数

你也可以创建一个中间件来访问和处理路由参数。这在需要在多个页面间共享路由逻辑时特别有用。

示例代码：

javascript
// middleware/checkParams.js

export default function ({ route }) {
  console.log(route.params.id); // 访问路径参数
  console.log(route.query.search); // 访问查询参数

  // 这里可以加入一些逻辑判断或者重定向等
}

然后你可以在页面组件中使用这个中间件：

javascript
<script>
export default {
  middleware: ['checkParams'],
}
</script>

以上方法展示了如何在 Nuxt 3 中获取路由参数。根据具体的应用场景和需求，你可以选择最适合的方法来实现。