Помогите настроить пути вo vue router

У меня есть файл роутер, в котором прописаны ссылки на страницы (его думаю нет смысла прикреплять, там нет ошибок)

Есть компонент films.vue, в котором я для свайпера вывожу список фильмов как карточки (ссылки типо)

И мне нужно что бы при клике на эту карточку открывалась страница именно для конкретной карточки (данные для карточки в массиве, который я беру с firebase), но я понятия не имею как настроить пути так, чтобы это работало.

Может кто сталкивался:

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const selectFilm = (film) => {
    router.push('/films-info');
};
defineProps({
    films: {
        type: Array,
        required: true,
        default: () => []
    },
    title: {
        type: String,
        required: true,
    },
    link: {
        type: String,
        required: false,
    },
    imgUrl: {
        type: String,
        required: false,
    },
    imgAlt: {
        type: String,
        required: false,
    },
})
</script>
<template>
    <div class="swiper__container">
        <h1 class="swiper__title">{{ title }}</h1>
        <swiper-container class="swiper" :slides-per-view="5" :space-between="20">
            <swiper-slide v-for="(film, index) in films" :key="index" class="swiper-slide">
                <div class="swiper-slide__container" @click="selectFilm(film)">
                    <img class="swiper__img" :src="film.imgUrl" :alt="film.imgAlt">
                    <!-- <RouterLink to="/films-info" class="swiper-link">{{ film.link }}</RouterLink> -->
                    <a class="swiper-link">{{ film.link }}</a>
                </div>
            </swiper-slide>
        </swiper-container>
    </div>
</template>

а вот массив, из которого я получаю данные для карточек:

const fetchMovies = async () => {
    try {
        const querySnapshot = await getDocs(filmsRef);
        const moviesData = querySnapshot.docs.map(doc => ({
            link: doc.data().title,
            imgUrl: doc.data().img,
            imgAlt: doc.data().alt,
            status: doc.data().status,
        }));
        movies.value = moviesData;
        console.log(moviesData);
        loader.value = false;
    } catch (error) {
        console.error('Error fetching movies:', error);
    }
};

Но как сделать так, чтобы страница открывалась для конкретной карточки и выводила данные только для нее вообще не врубаюсь. Помогите пожалуйста..