En la declaración de la ruta tienes que especificar si el componente va a recibir algún prop, en este caso voy a tomar el ejemplo que da VueRouter.
Así es como seria el componente que tendría que recibir la información:
<template>
<div>
<h2 class="hello">{{name}}</h2>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: 'Vue!'
}
}
}
</script>
El envió de parámetros puedes declararlo de diferentes formas, un ejemplo es el siguiente que permite enviar valores de forma dinámica por medio de la ruta de acceso declarando por medio de :
en el atributo path
.
{ path: '/hello/:name', component: Hello, props: true }
Como tu no quieres que aparezcan en la url de acceso, se especificaría de la siguiente manera, por medio del atributo props mandando un objeto o una función que retorne la información que deseas:
{ path: '/static', component: Hello, props: { name: 'hello word' }}
{ path: '/dynamic/:years', component: Hello, props: Saludo}
// función que retorna información, esta funcion se declara afuera de la instancia de VueRouter.
function Saludo(route) {
// aqui puede ser una consulta o un proceso que desees
return {
name: `hello word, el año actual es ${parseInt(route.params.years)}`
}
}
Otra recomendación es usar el store para guardar y transportar la información de componente a componente, seria mas fácil que usar la forma que brinda VueRouter.
Fuentes consultadas: VueRoute#Passing Props to Route Components.