Pasando datos desde la ruta al cuerpo de la vista del enrutador.

Tengo una aplicación de página única con la siguiente estructura.

|- App.vue
|- + Vistas
| |- Page.vue
|- + Componentes
| |- Slider.vue

EDITAR 1: Solución gracias a @gengar.value

Resolví el problema pasando parámetros desde Page.vue con

methods: {
emitIndex: function (index) {
this.$router.push({
name: “visualization”,
params: { imgCat: “visualization”, imgIndex: index },
});
},
}

App.vue que contiene el contenedor router-view que está enrutando la Page.vue
Slider.vue es un componente de App.vue

Quiero pasar el índice de la imagen seleccionada por el usuario y todos los datos de las imágenes desde Page.vue a App.vue y luego a Slider.vue para lograr el desacoplamiento de Slider de Page con fines de reutilización.

¿Cómo puedo pasar el índice seleccionado por el usuario de Page.vue a App.vue

He intentado usar parámetros, props y emitir pero fallé.

Página de muestra.vue

<template>
    <div v-for="(item, index) in 3" :key="index"></div>
</template>

<script>

export default ({
    data() {
        return {
            urls: ['url1', 'url2', 'url3']
        }
    }
})
</script>

Gracias de antemano

EDITAR 1: Solución gracias a @gengar.value

El problema se resolvió empujando los parámetros al enrutador a través de Page.vue y escuchándolo desde Slider.vue de la siguiente manera:

Page.vue

methods: {
passIndex: function (index) {
this.$router.push({
name: “visualization”,
params: { imgCat: “visualization”, imgIndex: index },
});
},
}

Slider.vue

watch: {
“$route.params.imgCat”: function (val) {
this.state = val;
},
“$route.params.imgIndex”: function (newVal) {
if (newVal != -1) this.imgState = newVal;
this.$router.push({ params: { imgIndex: -1 } });
}