I want to create a page where information about games on my site will be posted using a component that will be rendered depending on which card I click on (depending on the name of the game). I don’t quite understand how to do this, it seems that when I click on a card it takes me to a new page, but nothing is rendered for me.

It’s my Router.js, where is it written that it should redirect to the game page

 {
    path: '/games/:title',
    component: PagesGames
  }

Also here is my main component for the page
PageGames, which renders everything about the game

  <script setup>
defineProps({
  title: String,
  image: String,
  price: String
})
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <img :src="image" alt="Game Image" />

    <p>Price: {{ price }}</p>
  </div>
</template>

This is the code of my component, where I have cards with games and by clicking on the card I should be redirected to PageGames (to the page with information about the game)

   const goToGamePage = () => {
  router.push(`/game/${props.title}`)
}
<template>
  <div class="game-card" @click="goToGamePage">
    <img :src="image" alt="Game Image" class="game-image" />
    <div class="game-info">
      <div class="game-title">{{ title }}</div>
    </div>
  </div>
</template>

Well, something like this is how I painted it all, I don’t know what to do with it

if anyone knows how to do this, please help with this

thank you very much in advance

I tried to do everything through the game ID myself, but it didn’t work at all, I tried to somehow select a game from the array, but it also didn’t work