How to access routing parameters in Vue.js - Nuxt - TypeScript application?

Accessing route parameters in a Vue.js-Nuxt-TypeScript application is a common task for handling dynamic content or modifying page behavior based on URL parameters. The following are detailed steps to achieve this functionality:

1. Defining Dynamic Routes

First, define a dynamic route, typically implemented within the pages directory by using file or folder names with an underscore prefix. Suppose we want to create a user detail page; we can define a dynamic route as follows:

shell
pages/users/_id.vue

Here, _id represents a dynamic parameter for the user ID, where each unique ID corresponds to a different user detail.

2. Accessing Route Parameters

Within the _id.vue component, you can access the current route information via the this.$route object. When using TypeScript, to enhance type support and IntelliSense, consider utilizing the @Component decorator from the vue-property-decorator library to define the component, as shown in the example below:

typescript
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class UserDetail extends Vue {
  mounted() {
    const userId = this.$route.params.id; // Accessing route parameter id
    console.log(`Current user ID: ${userId}`);
    // You can perform further operations based on userId, such as fetching user data.
  }
}
</script>

3. Using Async Data Methods to Access Route Parameters

In Nuxt.js, if you need to fetch data before page rendering (e.g., retrieving data from an API based on route parameters), you can use the asyncData or fetch methods. Here is an example using asyncData:

typescript
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class UserDetail extends Vue {
  async asyncData({ params }) {
    const userId = params.id;
    const userData = await fetchUserById(userId); // Assuming this is an API request function
    return { userData };
  }
}
</script>

In this example, the asyncData method receives a context object containing the route parameters. By destructuring, you can directly access the id parameter and proceed with further operations, such as initiating API requests.

Summary

Accessing route parameters with Nuxt.js and TypeScript is highly intuitive; you can directly access them via this.$route.params or leverage context parameters in server-side rendering data prefetch methods like asyncData. This approach enables pages to display different content based on varying parameters, making it ideal for implementing features such as user detail pages.