I'm just taking a vue3 project and need a bit of help with a dynamic route.
Firstly, I have a pet.json archive where I have information about dogs and cats. I'm gonna show you my project:
App.vue
<template>
<div id="app">
<app-header />
<div class="app-container">
<router-link to="{ id: PetDetail, params: { id: json.id, pet:pet }}"
><router-view
/></router-link>
</div>
<Footer />
</div>
</template>
<script>
import AppHeader from "@/components/AppHeader.vue";
import Footer from "@/components/Footer.vue";
export default {
name: "App",
components: {
AppHeader,
Footer,
},
};
</script>
route.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
import PetDetail from "@/components/PetDetail.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/:catchAll(.*)",
name: "NotFound",
component: NotFound,
},
{
path: "/pet/:id?",
name: "PetDetail",
component: PetDetail,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
PetDetail.vue
<template>
<header id="header" class="header">
<div class="header-container_pet container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li><a href="">Servicios</a></li>
<li><a href="">Sobre nosotros</a></li>
<li><a href="">Contactar</a></li>
</ul>
</nav>
<a href="" class="btn btn-login btn-light" title="Iniciar sesión"
>Iniciar sesión</a
>
<div id="menuIcon" class="menu-icon">
<div id="menuIconBar" class="menu-icon-bar"></div>
</div>
</div>
</header>
<main class="page-home">
<div class="container">
<div class="block-featured-content">
<div class="foto-pet">
<div class="foto-pet-color"></div>
</div>
<div class="pet-info">
<p class="pet-title">
Darko <span class="blue-text">5 años, Barcelona</span>
</p>
<div class="pet-details">
<div class="pet-detail">
<span class="pet-detail-title">Especie</span>
<span class="pet-detail-data">Perro</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Sexo</span>
<span class="pet-detail-data">Macho</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Medida</span>
<span class="pet-detail-data">Pequeño</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Fecha de nacimiento</span>
<span class="pet-detail-data">08/10/2016</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Estado</span>
<span class="pet-detail-data">En adopción</span>
</div>
</div>
<div class="buttom">
<div class="buttom-adoptar">
<p class="p-adoptar-text">Lo quiero adoptar</p>
</div>
<div class="buttom-compartir">
<p class="p-compartir-text">Compartir</p>
</div>
</div>
</div>
</div>
<div class="pet-history">
<h3 class="my-history">Mi historia</h3>
<p class="my-history-text">
Darko a sus 5 años de edad tiene que volver a buscar un hogar, su
dueña ingresaba y nadie se podía hacer cargo de él. Como buen Bulldog
Francés es muy bueno, cariñoso y sociable, pero a la vez cabezota y
obstinado, ideal para amantes de esta raza. Esperamos que Darko no
tenga que pasar mucho más tiempo en una jaula y por fin, encuentre esa
familia que lo cuide y quiera como se merece.
</p>
</div>
<div class="pet-extras">
<div class="pet-extra">
<h3 class="my-history">Mi personalidad</h3>
<div class="tags">
<span class="tag-blue">Bueno con otros perros</span>
<span class="tag-blue">Cariñoso</span>
<span class="tag-blue">A veces ladro</span>
<span class="tag-blue">Amigable con extraños</span>
</div>
</div>
<div class="pet-extra">
<h3 class="my-history">Me entregan</h3>
<div class="pet-details-extra">
<div class="pet-detail">
<span class="pet-detail-title">Vacunado</span>
<span class="tag-red">No</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Desparasitado</span>
<span class="tag-green">Si</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Esterilizado</span>
<span class="tag-green">Si</span>
</div>
<div class="pet-detail">
<span class="pet-detail-title">Microchip</span>
<span class="tag-green">Si</span>
</div>
</div>
</div>
<div class="pet-extra">
<h3 class="my-history">Tienes que saber</h3>
<div class="pet-details-extra">
<div class="pet-detail">
<span class="pet-detail-data">Estoy en tratamiento médico</span>
</div>
<div class="pet-detail">
<span class="pet-detail-data">Soy positivo en Leishmania</span>
</div>
</div>
</div>
</div>
</div>
<section class="block-actions">
<div class="container">
<div class="match-box">
<p class="match-text">
Si <b>Darko</b> ya ha sido adoptado/a o no hacéis match, tenemos
otros animales que te necesitan. Encuéntralos
</p>
<form class="search-bar">
<input
type="text"
placeholder="Busca a tu nuevo mejor amigo"
class="form-control search-control"
/>
<button type="submit" class="btn-icon search-button"></button>
</form>
</div>
</div>
</section>
</main>
</template>
<script>
import json from "@/pets.json";
export default {
name: "PetDetail",
data() {
return {
id: this.$route.params.id,
object: {},
};
},
mounted() {
this.object = json.objects.find((item) => item.id == this.$route.params.id);
},
};
</script>
<style scoped lang="scss"></style>
PetList.vue
<template>
<div class="container">
<h2 class="title">Últimas incorporaciones</h2>
<div class="row">
<div
class="col-sm-6 col-md-4 col-lg-3"
v-for="pet in pets"
:key="pet.name"
>
<article class="card">
<div class="card-header">
<img
class="card-img-top"
:src="pet.image_url"
alt="{{ pet.name }}"
/>
</div>
<div class="card-body">
<div class="card-main">
<!-- <h3 class="card-title">{{ pet.nom }}</h3> -->
<h3 class="card-title">{{ pet.name }}</h3>
<p class="card-text">{{ pet.location }}</p>
</div>
<ul class="card-icons">
<li>
<img
v-if="pet.species == 'Gato'"
class="card-icon"
src="../assets/icons/icon_cat.svg"
alt="{{ pet.species }}"
/>
<img
v-if="pet.species == 'Perro'"
class="card-icon"
src="../assets/icons/icon_dog.svg"
alt="{{ pet.species }}"
/>
</li>
<li>
<img
v-if="pet.sex == 'Macho'"
class="card-icon"
src="../assets/icons/icon_male.svg"
alt="{{ pet.sex }}"
/>
<img
v-if="pet.sex == 'Hembra'"
class="card-icon"
src="../assets/icons/icon_female.svg"
alt="{{ pet.sex }}"
/>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</template>
<script>
import json from "@/pets.json";
export default {
name: "PetList",
data() {
return {
pets: json.data,
};
},
};
</script>
<style scoped lang="scss"></style>
pet.json
"data": [
{
"id": 1,
"name": "Thor",
"image_url": "https://petinder-images.netlify.app/thor.png",
"location": "Barcelona",
"species": "Gato",
"sex": "Macho",
"size": "Mediano",
"birth_date": "2018-06-01",
"handle_status": {
"vaccinated": false,
"dewormed": true,
"sterilized": true,
"microchip": true
},
"bio": "Thor llegó de Montcada y es algo tímido pero con un poco de confianza se deja mimar y acariciar.",
"status": "En adopción",
"personality": [
"Bueno con gatos",
"Timido",
"Juguetón"
],
"info_notes": []
},
PetList.vue prints all pet cards in home page. And I need click on each pet to go to their card using his id.
I don't know where is my problem but for sure I'm not calling good the route link.