Lo que quiero lograr es mandar un objeto(Estoy recorriendo con la directiva v-for) de mi componente a otro componente por medio de router-link. 1.- La vista donde recorro el objeto productos quiero enviar ese producto a una vista detalle.
<template>
<div class="container">
<h1 class="text-center">Productos</h1>
<div class="productos-container">
<div
class="card"
style="width: 18rem"
v-for="item in productos"
:key="item"
>
<img
src="https://via.placeholder.com/200x100/O https://placeholder.com/"
class="card-img-top"
/>
<div class="card-body">
<h5 class="card-title">{{ item.titulo }}</h5>
<p class="card-text">
{{ item.description }}
</p>
<router-link :to="{name:'Producto', params:{producto: item} }" class="btn btn-success btn-sm">Ver detalle</router-link>
</div>
</div>
</div>
</div>
</template>
2.- La vista donde quiero recibir mi objeto item.
<div class="container">
<div class="productos-container">
<div
class="card"
style="width: 18rem"
>
<img
src="https://via.placeholder.com/200x100/O https://placeholder.com/"
class="card-img-top"
/>
<div class="card-body">
<h5 class="card-title">asd</h5>
<p class="card-text">
lorem
</p>
</div>
</div>
</div>
3.- Ruta del componente detalle aqui:
const routes = [
{ path: '/producto/:producto', name: 'Producto', props: true, component: () => import('../views/productos/Detalle.vue') }
]