Methods and Best Practices for Retrieving Route Parameters in Nuxt.js

Fundamental Principles of Route Parameter Retrieval

In Nuxt.js applications, dynamic route parameters are essential for building single-page applications. When defining dynamic routes like pages/post/_slug.vue, accessing http://localhost:3000/post/hello-world requires the ability to retrieve the value of the slug parameter. Vue Router provides a complete route object to support this requirement.

Using $route Object to Access Parameters

In Vue components, current route information can be accessed through this.$route. This object contains several important properties:

{
  fullPath: string,
  params: {
    [param_name]: string
  },
  path: string,
  query: {
    [query_name]: string
  }
}

For dynamic route parameters, they can be directly obtained via this.$route.params.slug:

<script>
export default {
  mounted() {
    console.log(this.$route.params.slug);
  }
};
</script>

Server-Side vs Client-Side Parameter Retrieval

In Nuxt.js universal rendering mode, differences between server and client must be considered. The mounted hook executes only on the client side, while the asyncData method can execute on both server and client:

<script>
export default {
  asyncData({ route, params }) {
    if (process.server) {
      console.log(route.params.slug);
      console.log(params.slug);
    }
    return {
      slug: params.slug
    }
  }
};
</script>

It's important to note that asyncData executes on the server during the initial request and on the client during subsequent route navigation.

Parameter Retrieval in Nuxt 3

In Nuxt 3, using the Composition API is recommended for accessing route parameters:

<script setup>
const route = useRoute();
const slug = ref(route.params.slug);

onMounted(() => {
  console.log(slug.value);
});
</script>

This approach is more modern and integrates perfectly with Vue 3's reactive system.

Difference Between Query Parameters and Path Parameters

It's crucial to distinguish between path parameters and query parameters. Path parameters define route structure, like slug in /post/hello-world; while query parameters are for additional information, like ?token=abc123, accessible via this.$route.query.token.

Practical Application Scenarios

In complex applications, such as integrating with Craft CMS live preview functionality, route parameter retrieval becomes even more important. By setting specific route prefixes and query parameters, real-time content updates can be achieved:

const route = useRoute();
const { data: page } = await useFetch('/api/query', {
  body: {
    query: articleGql,
    route,
    variables: {
      uri: `article/${route.params.articleCategory}/${route.params.articleSlug}`
    }
  },
  method: 'POST'
});

Performance Optimization Recommendations

For parameter retrieval that doesn't require server-side rendering, using the mounted hook or Composition API is recommended to avoid unnecessary server computation. For SEO-critical content, asyncData or server routes should be prioritized.

Error Handling and Edge Cases

In practical development, scenarios where parameters might not exist should be considered:

const slug = route.params.slug || 'default-slug';

Additionally, for nested dynamic routes, ensure parameter names match the route definitions consistently.