How to get route parameters from Nuxt 3 server

When using Nuxt 3, retrieving server-side route parameters can be achieved through several different approaches. These parameters are typically accessed within pages or components based on the URL path or query string. Here are several common methods to retrieve these route parameters:

1. Using useRoute and useRouter

In Nuxt 3, you can use useRoute and useRouter—two Composition API hooks—to access the current route information, including path parameters and query parameters.

Example code:

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

const route = useRoute()

const id = route.params.id  // Assuming URL is /users/:id
const queryParam = route.query.search  // Assuming query parameter is ?search=keyword
</script>

In this example, useRoute provides access to the current route object, from which you can obtain path parameters and query parameters via route.params and route.query.

2. Using the asyncData Method for Asynchronous Data Loading

Nuxt 3 provides the asyncData method, which allows you to fetch data on the server and pass it as props to the component. You can access route parameters within this method.

Example code:

javascript
<script setup>
export async asyncData({ params, query }) {
  console.log(params.id); // Accessing path parameters
  console.log(query.search); // Accessing query parameters

  // Perform additional data processing or API calls here
  return {
    userId: params.id,
    searchKeyword: query.search
  };
}
</script>

In this example, the asyncData method extracts path parameters and query parameters, which can be used for further data processing or API calls.

3. Accessing Route Parameters via Middleware

You can also create a middleware to access and process route parameters. This is particularly useful when sharing route logic across multiple pages.

Example code:

javascript
// middleware/checkParams.js

export default function ({ route }) {
  console.log(route.params.id); // Accessing path parameters
  console.log(route.query.search); // Accessing query parameters

  // Add logic checks or redirects here
}

Then, apply this middleware in your page component:

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

These methods demonstrate how to retrieve route parameters in Nuxt 3. Depending on your specific application scenario, choose the most suitable method to implement.