Get the id From another component with the Link using Vue

I'm making a project with the PokeAPI using vue, I have 3 components, 1. Home(Just a Welcome Page without js), 2. Pokelist(calls the API and shows the first 151 Pokemon), 3. Details (THe one where I want to show the details of the selected Pokemon), I have to use RouterLink.
I am clueless about doing something like this and found out a way of send the id of the selected Pokemon into the "Description" component's link (Bulbasaur puts a "1" at the end of the link for instance) the thing is that I can't get that id into the API call bit I can display it in an h3 for example.
I don't know another way of getting the id from the pokeList component in the Description component to get only that Pokemon information using router link, I'm a beginner Here is my Pokelist code:

PokeList Component

<div class="row">
<div v-for="pokemon in pokemons" :key="pokemon.id" class="col-12 col-md-4 col-sm-6">
<div class="card-image">
<div class="card-sl">
<router-link :to="'/pokemon/' + pokemon.id">
<img :src="pokemon.sprites.front_default" @click=" redirectToDescription(pokemon.id)" />
</router-link> <!--This sends you to the new component with the selected pokemon Id at the end-->
</div>
<div class="card-heading">
<h3 class="pokemonName">{{ pokemon.name }}</h3>
</div>
<div class="card-text">
<p>Base Experience: {{ pokemon.base_experience }}</p>
</div>
</div>
</div>
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
name: "App",
data() {
return {
pokemons: [],
};
},
setup() {
const pokemons = ref([]);
onMounted(async () => {
try {
for (let index = 1; index < 152; index++) {
const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${index}`);
console.log(response.data);
//console.log(response.data.moves);
pokemons.value.push(response.data); // Push each Pokemon data to the reactive array
}
}
catch (error) {
console.error(error);
}
});
return {
pokemons
};
},
methods: {
redirectToDescription(pokemonId) {
this.$router.push('/pokemon/' + pokemonId);
}
}
};
</script>

Now, in the new component i try to get that id number from the link but it throws an error "TypeError: Cannot read properties of undefined (reading '$route')"

Describe Component

<template>
<div>
<h2>Pokemon Description</h2>
<p>{{ this.$route.params.id }}</p> <!--This is the only way i found to get the id and here it works-->
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
name: "App",
data() {
return {
pokemons: [],
};
},
setup() {
const pokemons = ref([]);
onMounted(async () => {
try {
const pokemonId = this.$route.params.id;
const response = await 
//Here, i try to use the method to get the id biut i get the said error, if i just put a number it works but it needs to throw the previously selected pokemon id to get all the info of that specific pokemon
axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`); 
console.log(response.data);
//console.log(response.data.moves);
pokemons.value.push(response.data); // Push each Pokemon data to the reactive array
console.log(pokemonId);
}
catch (error) {
console.error(error);
}
});
return {
pokemons
};
}
};
</script>

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.