[Vuejs]-Get the id From another component with the Link using Vue

by

0👍

✅

The error you’re encountering in the Describe component is because you’re trying to access $route directly within the setup() function. In Vue 3, the composition API, including the setup() function, doesn’t have access to the instance’s properties and methods like $route.

To access route information in a composition API component, you can use the useRoute function from the vue-router package. Here’s how you can modify your Describe component to get the id parameter from the route:

<template>
  <div>
    <h1>Details</h1>
    <div v-for="pokemon in pokemons" :key="pokemon.id">
      <h3>{{ pokemon.name }}</h3>
      <!-- Display other details of the Pokemon -->
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

export default {
  name: "Describe",
  setup() {
    const pokemons = ref([]);
    const route = useRoute();

    onMounted(async () => {
      try {
        const pokemonId = route.params.id;
        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
        pokemons.value.push(response.data);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    });

    return {
      pokemons
    };
  }
};
</script>

In this updated code, we import the useRoute function from vue-router and then call it within the setup() function to get the current route information. We assign it to the route constant. From route.params.id, we extract the id parameter that was passed in the URL.

Now, you can access the id parameter in your axios call and retrieve the details of the specific Pokemon. The fetched data is then pushed to the pokemons array, which you can iterate over in the template to display the Pokemon’s details.

Leave a comment