Gostaria de saber como faço para alterar o conteúdo de um componente baseado em um parâmetro que esta na url do meu site.
Estou desenvolvendo um portfólio e nele criei um arquivo chamado Trabalhos.vue.
Não sei se fiz certo, mas neste mesmo arquivo criei uma array com o conteúdo que quero apresentar.
Se estiver em /estampa/1 mostra o conteúdo que ele encontrar com este id na array e por ai vai.
Em Trabalhos.vue tenho o seguinte código:
<template>
<div>
( Conteúdo de acordo com o ID encontrado na url )
</div>
</template>
<script>
export default {
data() {
return {
estampas: [
{
id: '1',
name: 'Estampa 1',
content: [
{ img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 1 estampa 1' },
{ img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 2 estampa 1' },
{ img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 3 estampa 1' }
]
},
{
id: '2',
name: 'Estampa 2',
content: [
{ img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 1 estampa 2' },
{ img: 'https://via.placeholder.com/500x300&text=Estampa', caption: 'Legenda 2 estampa 2' }
]
},
]
}
}
}
</script>